Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing HTML in a WebView programmatically

I'm loading an html asset page into a WebView using

webMain.loadUrl("file:///android_asset/record.html");

which works fine, but inside the html are a number of places where I'd like to use information from the app. For instance, the HTML may contain text that reads "[Custom]". Is there a way I can replace that word with information passed from the application?

like image 996
Dawson Goodell Avatar asked Jan 20 '12 07:01

Dawson Goodell


4 Answers

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.

like image 78
AdamVe Avatar answered Nov 06 '22 06:11

AdamVe


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.

like image 36
reTs Avatar answered Nov 06 '22 05:11

reTs


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

like image 38
Cata Avatar answered Nov 06 '22 07:11

Cata


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+"';})()");
            
    }
});
like image 5
Ninja Avatar answered Nov 06 '22 06:11

Ninja