WebView中JS调用Android Method 遇到的坑整理

Posted 程序员大亨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebView中JS调用Android Method 遇到的坑整理相关的知识，希望对你有一定的参考价值。

WebView是android中常用的一个组件，其作用是展示网页，并让网页和android app进行一些业务逻辑上的交互。

其坑无数，相信用过的都知道，一个一个来解决吧。

1.怎么互调:

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function android(bl){
            if(bl){

                document.getElementById("ap").innerHTML= "是true啊参数传过来了"
            }else{
                document.getElementById("ap").innerHTML= "改变了段落的文字"
            }
        }
        function self(){
                document.getElementById("btn").innerHTML= "javascript改变按钮文字"
        }

    </script>
</head>
<body>
    <div>
        <p id="ap">这是一个段落</p>
        <button onclick="window.hello.showAndroid()">点击Toast</button>

        <button onclick="self()" id="btn">javascriptzi自己的方法</button>
    </div>

</body>
</html>

上面是js代码 ，下面是android代码:

public class MyWebViewtest extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webviewtest_layout);

        initView();
    }

    private void initView() {
        final WebView webView = (WebView) findViewById(R.id.my_web);
        webView.loadUrl("file:///android_asset/webviewtest.html");

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JiaoHu(),"hello");

        Button btn = (Button) findViewById(R.id.get_js);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:android(true)");
            }
        });
    }

    public class JiaoHu{
        @JavascriptInterface
        public void showAndroid(){
            Toast.makeText(MyWebViewtest.this,"js调用了android的方法",Toast.LENGTH_SHORT).show();
        }
    }
}

js调用android方式: <button onclick="window.hello.showAndroid()">点击Toast</button>

hello指的是类（接口）的别名 ，在我们上面的代码中也就是JiaoHu类 ， showAndroid()是方法名，所以android和js要约定好的就是 类的别名 以及 方法名 即可调用成功。

android调用js方式:webView.loadUrl("javascript:android(true)");

android()为js中定义好的一个方法名，我们可以在android代码中传入一个参数true,在js中便能接收到,执行 document.getElementById("ap").innerHTML= "是true啊参数传过来了" 这一句。

2.坑之一(webview中js的方法不能执行)：

web组的同事在采用 ajax 框架请求后台数据的时候，我这里则无法显示，原因少了一句话:

webView.getSettings().setDomStorageEnabled(true);  //很关键！！！！

这句代码让android能读取js的节点，也就可以执行了

3.坑之二（webView中h5变形记）:

我们做的活动是类似于这样的

 

 然鹅，当点击了输入框，弹出软键盘，变成这样的:

没错，妈的变形了（变形记），这个需要前端同事将window的高度设置为定长（之前height=100%）

 var HEIGHT = $(\'body\').height();
        $(window).resize(function() {
            $(\'.main\').height(HEIGHT);
        });

可以的，这个解决了。

坑之三（js中操作android的UI了 导致 java.lang.IllegalStateException: Calling View methods on another thread than the UI thread.at 异常）：

这是最恶心的，没有之一，之前没遇到过。

我们活动中要集成umeng分享，分享到微信，分享到朋友圈都没有问题（更神奇的是做的时候还是ok的，提交给测试的时候就变卦了，日了狗了）。

涉及到一个操作UI的问题，那我们肯定要将js调用我们的代码放在UI线程中啊

runOnUiThread(new Runnable() {
    @Override 
    public void run() { 
        // Code for WebView goes here 
    } 
});

这个自然没问题，也就是要把我们注解的方法的内容放在UI线程中跑，但是你的 类 你的 接口 他不是Activity啊 没有runOnUiThread方法啊 。

急中生智，让我们的类 继承 Activity 

public class FreeFlowInterface extends Activity

ok，现在就可以了，然后在这么一来

@JavascriptInterface
    public void shareToFriend(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Bitmap bitmap = drawableToBitmap(R.drawable.sharepic);
                mShareController = UmengShareUtils.share(activity,mShareController,shareTitle,shareContent,targetUrl,bitmap);
            }
        });

    }

坑真的不少，且行且小心。

 

以上是关于WebView中JS调用Android Method 遇到的坑整理的主要内容，如果未能解决你的问题，请参考以下文章

android中webView加载H5，JS不能调用问题的解决

用webview做的android客户端怎样调用摄像头拍照

android webview如何获取网页输出的提示信息

WebView中JS调用Android Method 遇到的坑整理

Android Webview 和Javascript交互，实现Android和JavaScript相互调用

Android-webview和js脚本语言交互的时候怎么获取js方法的返回值