Android JS in WebView.loadUrl ()

Question

I want to load a webpage into a WebView, but delete part of the webpage. So, I created my own WebViewClient. And, in onPageFinished (), I did some javascript to remove some elements. Then I made the WebView visible.

However, when I run it, it sets the view to visible, and then I see the elements to be deleted. It looks like JS is very slow in the background. This creates a poor overview because it blinks on the full page and then on the desired partial page.

Here is my 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); } 

Any ideas on how to fix this?

Answer 1

In 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);"); 

In MainActivity.onCreate ():

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

In 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); } }); } } 

So, it was a combination of creating a JavascriptInterface and creating a JS function to wait for JS calls to complete before the interface was called (with visibility settings).

Answer 2

You can try to speed up WebView with

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

In any case, you should not immediately open your WebView. Why don't you create an interface (refer to http://developer.android.com/guide/webapps/webview.html , binding JavaScript code to Android) and call from your javascript to:

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

after the end of the animation?