Dynamically change HTML element in android webView

Question

I know this question is very common and can be solved using here - JS or JQuery and here - how to run it on Android. Well this methods are working fine but when we call:

`myWebView.loadUrl("javascript:document.body.innerHTML = document.body.innerHTML.replace('link1', 'link2')");`

image link1 is changing with link2, image is loading but page is restarted, so if I am at the end I am going to the beginning... can I just change link1 to link2 in real time, to not reload the page like in a real browser?

and I tried also setting id in my html file, like:

<img src="https://link1.jpg" id="dm5kode"/>

and run on Android:

myWebView.loadUrl("javascript:document.getElementById('dm5kode').src = 'link2'");

here I don't get nothing just empty screen...

How did you fix this? could you get what you want. I have same problem — user3575963
– user3575963, Commented Dec 1, 2015 at 21:01

arun · Accepted Answer · 2015-09-16 07:35:01Z

28

This is not reload the page.

"javascript:(
         function()
         {
            document.body.innerHTML = document.body.innerHTML.replace('link1', 'link2')
         })()"

example:

   WebView wb;
    wb = (WebView) findViewById(R.id.webView1); 
    wb.loadUrl("file:///android_asset/web1.html");
    wb.getSettings().setJavaScriptEnabled(true);

    wb.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView web, String url) {
            // TODO Auto-generated method stub
            String uname = "[email protected]";
            String pass = "******";
            /*
             * web.loadUrl(
             * "javascript:(function(){document.getElementById('email').value='"
             * + uname +
             * "';document.getElementById('pass').value='" +
             * pass + "';})()");
             */
            String link1 = "https://www.gstatic.com/webp/gallery3/1.png";
            String link2 = "https://www.gstatic.com/webp/gallery3/2.png";
            web.loadUrl("javascript:(function(){document.body.innerHTML = document.body.innerHTML.replace('" + link1+"', '" + link2+"')})()");
        }
    });

web1.html

  <!DOCTYPE html>
  <html>
  <head>
      <title>dynamic Image</title>  
  </head>

  <body>

 <img src="https://www.gstatic.com/webp/gallery3/1.png" id="dm5kode"/>

 </body>
 </html>

edited Sep 16, 2015 at 7:35

answered Sep 16, 2015 at 7:23

arun

1,75815 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stan Over a year ago

Incredible! +1. Is there any reference for the hack?

Alqueraf Over a year ago

Perfect answer, I wasted so much time until I found this! Thanks :)

Eren Over a year ago

btw, javascript can be also injected easily with 'webView.evaluateJavascript()' method. Example: webView.evaluateJavascript("$('#my_div').remove();$('#another_div').remove();", null);

Collectives™ on Stack Overflow

Dynamically change HTML element in android webView

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related