android webview js 交互案例,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端碰到的问题

上述log中第二行错误则出在Android代码中，原因是，当Webview调用js方法传递参数时，如果参数类型为数字时,这里的数字不一定是int型，也指string型数字，比如“12345”，毕竟js中是没有类型区分的。

大写的但是BUT：如果你传递不是数字，而是普通字符串时，就要注意了，会报上述的第二行错误，传递的String值没有定义。

解决方法：修改上述错误那行代码，在传递的数据两边加上单引号即可。

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

后记

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