Android与Javascript交互

最新推荐文章于 2024-07-26 20:46:33 发布

Android-kongqw

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量2.4k

点赞数 2

文章标签： javascript android

本文链接：https://blog.csdn.net/q4878802/article/details/53189882

版权

Android通信机制专栏收录该内容

9 篇文章 0 订阅

订阅专栏

转载请说明出处！
作者：kqw攻城狮
出处：个人站 | CSDN

本篇参考Android与HTML+JS交互入门

效果图

加载本地Html

contentWebView = (WebView) findViewById(R.id.webview);
// 加载Assets下的Html
contentWebView.loadUrl("file:///android_asset/html/test.html");

启用Javascript

contentWebView.getSettings().setJavaScriptEnabled(true);
contentWebView.addJavascriptInterface(this, "android");

Android调用Javascript的方法

Javascript写法

<script type="text/javascript">
    function jsFunction(){
         document.getElementById("content").innerHTML = "JS方法被调用";
    }
    function jsFunctionArg(arg){
         document.getElementById("content").innerHTML = "JS方法被调用并收到参数：<br/>" + arg;
    }
</script>

Android写法

// 调用JS的jsFunction方法
contentWebView.loadUrl("javascript:jsFunction()");
// 调用JS的jsFunctionArg方法
contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')");

Javascript调用Android的方法

Android方法

@JavascriptInterface
public void androidFunction() {
    Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show();
}

@JavascriptInterface
public void androidFunction(String text) {
    Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \n" + text, Snackbar.LENGTH_SHORT).show();
}

Javascript调用

<input type="button" style="width:300px;height:50px;" value="JS调用Android方法" onclick="window.android.androidFunction()" />

<input type="button" style="width:300px;height:50px;" value="JS调用Android带有参数的方法" onclick="window.android.androidFunction('[JS传递过来的数据]')" />

Code

HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
        <script type="text/javascript">
            function jsFunction(){
                 document.getElementById("content").innerHTML = "JS方法被调用";
            }
            function jsFunctionArg(arg){
                 document.getElementById("content").innerHTML = "JS方法被调用并收到参数：<br/>" + arg;
            }
        </script>
    </head>
    <body>
        <h1>HTML页面</h1>
        <hr/>
        <h3><div id="content">|</div></h3>
        <hr/>
        <input type="button" style="width:300px;height:50px;" value="JS调用Android方法" onclick="window.android.androidFunction()" />
        <br/>
        <input type="button" style="width:300px;height:50px;" value="JS调用Android带有参数的方法" onclick="window.android.androidFunction('[JS传递过来的数据]')" />
    </body>
</html>

测试类

package com.kongqw.kqwandroidjsdemo;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView contentWebView;

    @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled", "AddJavascriptInterface"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        contentWebView = (WebView) findViewById(R.id.webview);
        // 加载Assets下的Html
        contentWebView.loadUrl("file:///android_asset/html/test.html");
        // 启用Javascript
        contentWebView.getSettings().setJavaScriptEnabled(true);
        contentWebView.addJavascriptInterface(this, "android");
    }


    @JavascriptInterface
    public void androidFunction() {
        Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void androidFunction(String text) {
        Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \n" + text, Snackbar.LENGTH_SHORT).show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_js_function1) {
            // 调用JS的jsFunction方法
            contentWebView.loadUrl("javascript:jsFunction()");
            return true;
        } else if (id == R.id.action_js_function2) {
            // 调用JS的jsFunctionArg方法
            contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')");
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Android-kongqw

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android与Javascript交互

转载请说明出处！作者：kqw攻城狮出处：个人站 | CSDN本篇参考Android与HTML+JS交互入门效果图加载本地HtmlcontentWebView = (WebView) findViewById(R.id.webview);// 加载Assets下的HtmlcontentWebView.loadUrl("file:///android_asset/html/test.html
复制链接

扫一扫

专栏目录