WebView和js的互调

最新推荐文章于 2024-07-22 14:15:06 发布

weixin_34392843

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量84

点赞数

文章标签： java javascript 移动开发 ViewUI

原文链接：https://yq.aliyun.com/articles/657354

版权

（创建于2017/5/20）

一个网页中有如下代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script language="javascript">
    /* This function is invoked by the activity */
    function wave() {
        alert("Android调用Js啦");
    }
</script>
<body>
    <!-- Js调用Android代码 -->
    <a onClick="window.demo.onCallback()">点我!</a>
</body>

</html>

安卓代码如下

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);

        //在webView里面打开网页
        webView.setWebViewClient(new WebViewClient());

        //允许在webview里面弹出js的窗体
        webView.setWebChromeClient(new WebChromeClient());

        //允许js的执行
        webView.getSettings().setJavaScriptEnabled(true);

        //加载assets目录下的网页
        webView.loadUrl("file:///android_asset/demo.html");


        //把java里面的对象传递给js
        webView.addJavascriptInterface(new JsCallJava() {
            @JavascriptInterface
            @Override
            public void onCallback() {
                Toast.makeText(getApplicationContext(),"JavaScript调用的java代码",Toast.LENGTH_SHORT).show();
            }
        }, "demo");
    }

1.js 调用Java

我们知道，调用Java中一个方法，只需要获取到这个Java对象，然后对象.方法名的方式调用，在网页文件中，有这样一行

<a onClick="window.demo.onCallback()">点我!</a>

打开网页后点击点我两个字执行的就是一个onclick方法，window.demo表示的就是Java中的对象，onCallback（）就是Java中被调用的方法，也就是点击“点我”后执行Java中的一个onCallback（）方法，那么安卓中如何操作？
关键代码如下：

//把java里面的对象传递给js
        webView.addJavascriptInterface(new JsCallJava() {
            @JavascriptInterface
            @Override
            public void onCallback() {
                Toast.makeText(getApplicationContext(),"JavaScript调用的java代码",Toast.LENGTH_SHORT).show();
            }
        }, "demo"); 
         
    
        public interface JsCallJava{
              public void onCallback();
        }

设置一个接口，接口中的回调方法为js重调用的方法，很关键的一行@JavascriptInterface必须加上，指明这是一个js接口，否则无法执行

2.Java调用js

假如我们现在想调用网页中的wave方法

function wave() {
    alert("Android调用Js啦");
}

只需要这样执行

webView.loadUrl("javascript:wave()");

关键一点必须设置,不然无法弹出alert

//允许在webview里面弹出js的窗体
webView.setWebChromeClient(new WebChromeClient());

weixin_34392843

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebView和js的互调

（创建于2017/5/20）一个网页中有如下代码<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><script la...
复制链接

扫一扫