Android Webview和js交互踩坑笔记

啰嗦几句

Webview基本用法，Webview和js如何交互就不多说了，网上相关资料比较齐全。笔者最近在使用Webview和前端javascript交互的过程中，碰到一些问题，记录在此。

需求

在Webview加载完特定在线网址后调用js方法传递一些参数/数据给前端使用，前端提供给Webview调用的js方法名称为：getData(var)示例代码

...
// 让url在app内部Webview打开，而不是外部浏览器
mWeb.setWebviewClient(new WebviewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(Webview view, String url) {
                    view.loadUrl(url);
                    return super.shouldOverrideUrlLoading(view, url);
                }

                @Override
                public void onPageFinished(Webview view, String url) {
                    // onPageFinished方法在网页加载完毕时回调
                    super.onPageFinished(view, url);
                    // 从Android本地获取数据
                    String data = getLocalData();// 假设data = "myData";
                    // 调用javascript方法传递数据
                    mWeb.loadUrl("javascript:getData(" + data  + ")");// 高能剧透，这行有错误！！
                }
            });
            ...

上述代码中，Webview加载完url后，调用了js的方法getData(var)传递string数据myData给H5前端，看起来完全没毛病有木有！！

H5前端碰到的问题

实际上，在logcat窗口报出一行错误：

[INFO:CONSOLE(1)] “Uncaught ReferenceError: getData is not defined”, source: (1)
[INFO:CONSOLE(1)] “Uncaught ReferenceError: myData is not defined”, source: (1)

第一行提示说：js中没有定义getData方法，可是实际上js是定义了该方法的。一脸懵逼。
第二行提示说：myData没有定义，我传递过去数据myData居然提示js中没有定义。二脸懵逼。
第一行的报错：问题出在js方法作用域上，前端定义的这个方法时，外面嵌套了一层function，导致调不到该方法。
解决办法：js中去掉外层嵌套。

Android端碰到的问题

改完上述问题后，会报另外一个错误：

I/chromium: [INFO:CONSOLE(1)] “Uncaught SyntaxError: Unexpected token ILLEGAL”, source: (1)

上述log中第二行错误和这个新的log错误则出在Android代码中，原因是，当Webview调用js方法传递参数时，如果参数类型为数字时,这里的数字不一定是int型，也指string型数字，比如“12345”，毕竟js中是没有类型区分的。
大写的但是BUT：如果你传递不是数字，而是普通字符串时，就要注意了，会报上述的错误，传递的String值没有定义。
解决方法：修改上述错误那行代码，在传递的数据两边加上单引号包裹字符串即可，大家可以在浏览器F12的console调试台试试调用js方法，传递非数字参数时，必须使用’data’这类形式方可正确调用，不然控制台也报上述错误。比如要在控制台调用:getData(myData)，会报错，但是如果调用:getData(‘myData’)是没问题的。

...
mWeb.loadUrl("javascript:getData('" + data  + "')");// 注意data两边各多了一个单引号。
...

后记

至于向js传递特殊字符时需要转义，js如何调用Android方法等技巧，大家到别处去看看好了，这里不多写。祝大家开发顺利。

————————————————
原文链接：https://blog.csdn.net/Xiong_IT/article/details/52703941