同福

在App里实现App代码和WebView的JavaScript相互调用的方法

介绍

介绍

在使用WebView的时候,我们有时会遇到需要通过App调用WebView里的网页上面的JS函数,或者需要通过WebView里的网页上面的JS代码调用App的函数

福哥就遇到了这种需求,怎么办?下面就把实现的方法教给大家

教程

JS调用App

通过JS代码调用App比较麻烦,分为几个步骤

建立交互接口对象

我们需要建立一个特殊的接口对象,用来给JS调用

class TFJavascriptInterface {
    private Context context;

    public TFJavascriptInterface(Context context){
        this.context = context;
    }

    @JavascriptInterface
    public void FunCallByJs(Integer num, String str){
        System.out.println(num);
        System.out.println(str);
    }
}

绑定WebView控件

我们将交互接口对象绑定到具体的WebView上

这个 TFInterfaceObject 就是在后面给JS使用的

webView.addJavascriptInterface(new TFJavascriptInterface(this), "TFInterfaceObject");

JS调用

现在我们就可以在这个WebView里的页面上通过JS调用“FunCallByJs”这个方法了

window.TFInterfaceObject.FunCallByJs(168, "福哥");

App调用JS

通过App调用JS代码,其实就是重定向到“JavaScript:xxx”这个特殊的网址上就可以了

可以调用系统JS函数

可以调用系统命令

可以调用自定义函数

webView.loadUrl("JavaScript:alert(123)");
webView.loadUrl("JavaScript:document.location='https://tongfu.net/'");
webView.loadUrl("JavaScript:CallFromApp()");

虽然理论上可以调用任何JS代码,但是福哥还是推进封装到function里再调用这个function比较好~~