从 Android 的 webview 中调用 Javascript 方法答案

【问题标题】：Calling Javascript method from within webview in Android从 Android 的 webview 中调用 Javascript 方法
【发布时间】：2016-03-10 02:36:05
【问题描述】：

我正在尝试从 webview 中调用在 html 页面中定义的 javascript 方法。函数没有被调用，我在日志中看不到任何错误。

这是 html 文件。

    </head>
    <body>
    <script type="text/javascript">
        function callJS(){
            $.ajax({url:"http://10.0.2.2:5010"});
        }
    </script>
    </body>
    </html>

这是android中Activity中的Java代码

    WebView webView = new WebView(this);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadUrl("file:///android_asset/temp.html");
    webView.loadUrl("javascript:callJS()");

不确定如何调试。当我在 html 的 body 标记中添加 onload=callJS() 时，我看到正在进行远程调用。所以，看起来我的 HTML 很好，并且正在加载到 webview 中。但是webview不能直接调用javascript方法。

【问题讨论】：

标签： javascript android html webview

【解决方案1】：

您应该在页面加载时执行 javascript 函数

webView.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl("javascript:callJS()");
    }
});

当您输入onload=callJS() 时，表示页面加载时将调用javascript 函数。对于调试，您可以将 console.log("your text here") 放入您的 javascript 函数中，您将在您的 android studio 日志中获得它。（通常带有标签I/chromium）。否则，您可以通过 Chrome 在 Android 上使用远程调试。这里的文档https://developer.chrome.com/devtools/docs/remote-debugging。

【讨论】：

【解决方案2】：

请立即尝试：

活动代码：

public class MainActivity extends AppCompatActivity {
 private WebView mWebView = null;
    private ProgressBar mLoading;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.mWebView = (WebView)findViewById(R.id.wvPortal);
        mLoading = (ProgressBar) findViewById(R.id.pbLoading);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setSupportZoom(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setSupportMultipleWindows(true);
        mWebView.getSettings().setDomStorageEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient());
       /* To keep page navigation within the WebView and hence within the app,
        we need to create a subclass of WebViewClient,and override its shouldOverrideUrlLoading(WebView webView, String url) method.*/
        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        mWebView.setWebViewClient(webViewClient);
        mWebView.loadUrl("file:///android_asset/www/index.html");
        WebSettings mWebSettings = mWebView.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        Log.d("Test 0","Interface calls");
        //calling javascript interface:
        // 1st.parameter is the JavaScript interface object itself.
        // 2nd.parameter is the name of the global JavaScript variable which the JavaScript interface object is bound to.
        mWebView.addJavascriptInterface(new AppJavaScriptProxy(this,mWebView), "androidAppProxy");

    }
}

AppJavaScriptProxy 类 用于创建接口：

public class AppJavaScriptProxy {
    private Activity activity = null;
    private WebView webView  = null;
    public AppJavaScriptProxy(Activity activity,WebView webview) {
        this.activity = activity;
        this.webView  = webview;
        Log.d("Test 1","in Interface");
    }

    @JavascriptInterface
    public void showMessage(final String message) {
        Log.d("from javascript", "" + message);
        final Activity theActivity = this.activity;
        final WebView theWebView = this.webView;
        this.activity.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (!theWebView.getUrl().startsWith("file:///android_asset/www/index.html")) {
                    return;
                }
                Toast toast = Toast.makeText(
                        theActivity.getApplicationContext(),
                        message,
                        Toast.LENGTH_SHORT);
                toast.show();
            }
        });
    }
}

Index.html 在 html 页面中调用此脚本。

<input type="button" value="call Methode" onClick="showMessage("Message from JavaScript")" />
<script>
    if(typeof androidAppProxy !== "undefined"){
    androidAppProxy.showMessage("Message from JavaScript");
} else {
    alert("Running outside Android app");
}
</script>

在 webview 索引页面上的任何按钮上调用此脚本。参考。 Building webapps in webview

如果上面的代码 sn-p 对您有帮助，请投票给我的答案。谢谢！

【讨论】：

【解决方案3】：

这样写你的代码

WebView webView = new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/temp.html");
webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                view.loadUrl("javascript:callJS()");
            }
        });

【讨论】：