Android JS桥交互（"Uncaught ReferenceError: xxx is not defined or xxx has no method"）

 

网上android和js交互的代码有不少，也很容易搜到。最近在做的项目需要用到js桥，遇到了一些问题，记录下来，希望以后遇到能马上解决掉。

一开始我找的demo是从这个：http://blog.csdn.net/beyond0525/article/details/9374301 
上面有js调用android的代码，也有android调用js的代码，很全面，在API 17一下跑起来都OK的，但是我们升级API 版本，问题就来了，android调用js没有问题，js调用android会有一些小问题。

查看log日志

[INFO:CONSOLE(1)] "Uncaught ReferenceError: is not define
I/chromium(490): [INFO:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token ILLEG
[Android] Web Console: Uncaught TypeError: Object [object Object] has no method 'xxx'

会发现Uncaught ReferenceError: xxx is not defined or xxx has no method 这个异常，要么是xxx变量或者方法没有定义，要么是xxx找不到这个方法。

解决方法

添加一个自定义的WebViewClient，指定加载步骤，在浏览器的网页完全显示的时候，在调用js桥。

mWebView.setWebViewClient(new WebViewClientDemo());
lass WebViewClientDemo extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
             // 当打开新链接时，使用当前的 WebView，不会使用系统其他浏览器  
             view.loadUrl(url);
             return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            // 在这里执行你想调用的js函数
            // android 调用js代码
            // mWebView.loadUrl("javascript:funFromjs()");
            // js调用android代码,设置本地调用对象及其接口
            mWebView.addJavascriptInterface(new JsObject(), "android");
        }
    }

如果加上以上代码还没有解决问题的话，看来我们需要加上一些特技了。 
1.我们需要给js调用android的方法加上一个@JavascriptInterface的注解

    class JsObject{

        @JavascriptInterface
        public void funAndroid() { 
            Toast.makeText(mContext, "调用android本地方法funAndroid!", Toast.LENGTH_LONG).show();
        }

    }

2.一个比较奇怪的问题，有的HTML界面需要加上 mWebView.loadData(“”, “text/html”, null); 
这个好像跟H5界面有关的。

这样，js桥叫可以在高版本的 API 上正常的和android客户端交互了。

Demo地址： http://download.csdn.net/detail/u012301841/9279911