WebView.loadUrl() 中的 Android JS答案

【问题标题】：Android JS in WebView.loadUrl()WebView.loadUrl() 中的 Android JS
【发布时间】：2013-10-20 18:21:43
【问题描述】：

我想在 WebView 中加载一个网页，但删除部分网页。因此，我创建了一个自定义 WebViewClient。而且，在 onPageFinished() 中，我做了一些 javascript 来删除一些元素。然后，我使 WebView 可见。

但是，当我运行它时，它会将视图设置为可见，然后我会看到元素被删除。好像 JS 在后台运行得很慢。它会造成糟糕的观看体验，因为它会闪烁整个页面，然后是所需的部分页面。

这是我的 onPageFinished()

@Override
public void onPageFinished(WebView view, String url) {

    view.loadUrl("javascript:"
            + "document.getElementsByClassName('header')[0].style.display='none';"
            + "document.getElementById('section_0').style.display='none';"
            + "document.getElementById('page-actions').style.display='none';"
            + "document.getElementsByClassName('languageSelector')[0].style.display='none';"
            + "document.getElementById('mw-mf-last-modified').style.display='none';"
            + "document.getElementById('footer').style.display='none';");

    loadingView.setVisibility(View.INVISIBLE);
    view.setVisibility(View.VISIBLE);
}

关于如何解决这个问题的任何想法？

【问题讨论】：

标签： javascript android android-webview webviewclient

【解决方案1】：

在 onPageFinished() 中：

view.loadUrl("javascript:"
            + "var FunctionOne = function () {"
            + "  var r = $.Deferred();"
            + "  try{document.getElementsByClassName('header')[0].style.display='none';}catch(e){}"
            + "  try{document.getElementById('section_0').style.display='none';}catch(e){}"
            + "  try{document.getElementById('page-actions').style.display='none';}catch(e){}"
            + "  try{document.getElementsByClassName('languageSelector')[0].style.display='none';}catch(e){}"
            + "  try{document.getElementById('mw-mf-last-modified').style.display='none';}catch(e){}"
            + "  try{document.getElementById('footer').style.display='none';}catch(e){}"
            + "  setTimeout(function () {"
            + "    r.resolve();"
            + "  }, 2500);"
            + "  return r;"
            + "};"
            + "var FunctionTwo = function () {"
            + "  window.CallToAnAndroidFunction.setVisible();"
            + "};"
            + "FunctionOne().done(FunctionTwo);");

在 MainActivity.onCreate() 中：

this.webView.addJavascriptInterface(new JsObject(webView, loadingView), "CallToAnAndroidFunction");

在 MainActivity() 中：

public class JsObject {
    private View loadingView;
    private View view;
    JsObject(View view, View loadingView){this.view = view;this.loadingView = loadingView;}
    @JavascriptInterface
    public void setVisible(){
        runOnUiThread(new Runnable() {

           @Override
           public void run() {
               view.setVisibility(View.VISIBLE);  
                loadingView.setVisibility(View.INVISIBLE);               
           }
       });
    }
}

因此，它是制作 JavascriptInterface 和制作 JS 函数的组合，以在调用接口之前等待 JS 调用完成（使用可见性设置）。

【讨论】：

我认为第一个代码中的结构不是最好的。

【解决方案2】：

您可以尝试通过以下方式加速您的 WebView：

webview.getSettings().setRenderPriority(RenderPriority.HIGH);
webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

无论如何，您不应该立即让您的 WebView 可见。为什么不创建一个接口（请参阅http://developer.android.com/guide/webapps/webview.html，将 JavaScript 代码绑定到 Android）并从您的 javascript 调用：

public void myCallback(){ view.SetVisibilitu(View.VISIBLE) };

动画结束后？

【讨论】：

我刚刚尝试制作界面，但在 JS 完成之前它仍然可见。我关注了：stackoverflow.com/questions/16342100/…
我自己不是 js 专家，但尝试在更改样式后使用 setTimeout(yourAndroidCallbackFunction, 5000) 看看是否是问题所在。