Changing HTML in a WebView programmatically

This is worked for me.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Payment Demo</title>
</head>
<body>
    <div>
        <input type="text" id="uname " name="uname " value="">
        <input type="text" id="pass" name="pass" value="">
    </div>
</body>
</html>

This is java code.

WebView 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('uname').value = '"+uname+"';})()");
        web.loadUrl("javascript:(function(){document.getElementById('pass').value = '"+pass+"';})()");
            
    }
});

This is an old and already accepted question, however I am sure that the problem can be solved in more elegant way by using javascript.

Keep the html file in your assets folder and surround the text which you want to replace into with div elements with unique id's.

<html>
  <head> ... <head> 
  <body> 
    Static text
    <div id="replace1">replace me</div>
    <div id="replace2">replace me too</div> 
    More static text ... 
  </body>
</html>

Now create a javascript function which will replace the innerHtml of a div with an id:

    function replace(id, newContent)
    {
        document.getElementById(id).innerHTML = newContent;
    }

This function will be best placed directly in the html file, update the <head> section to look like this:

<head>
  ...
    <script type="text/javascript">
        function replace(id, newContent)
        {
            document.getElementById(id).innerHTML = newContent;
        }
    </script>
</head>

Now we need to call the javascript function from from the WebView Android api:

WebView helpView = (WebView)findViewById(R.id.helpView);
helpView.getSettings().setJavaScriptEnabled(true);
helpView.setWebViewClient(new WebViewClient() {
  @Override
  public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    view.loadUrl("javascript:replace('replace1', 'new content 1')");
    view.loadUrl("javascript:replace('replace2', 'new content 2')");
  }
});
helpView.loadUrl("file:///android_asset/help.html");

Using this you will avoid reading potentially large data into memory and running expensive operations on it unnecessarily.


Yes you can do that by loading your page in a String and then load that string in your WebView.

Eg:

String summary = "<html><body>You scored <b>192</b> points.</body></html>";
webview.loadData(summary, "text/html", null);

Taken from here


Actually I do not understand why the file size of record.html will affect maintainence of the code. Read the html string (using Java reader class or what ever) from the html file in asset, use replaceAll function with Regex to replace all the [Custom] in the html file. How long the html is should not really affect how you maintain the code. It should rather be a performance problem, or the string is really really long that exceeds the java String limit.

some code I have used before :

InputStream is = getApplicationContext().getAssets().open("details/product_jsmodify.html");
Reader r = new InputStreamReader(is);
String details = Utils.readertoString(r);
details = details.replace("%product_name%",productName );

Utils is my class doing the conversion to string. I am not using Regex here as I am only replacing word for once. Then I load the string like Cata does. It is quite clean I suppose.

Tags:

Android

Android Webview

Recent Posts