17 Lut

Tutorial: Run JavaScript in Android WebView to hide div

We need to run JavaScript after page load in Android webView. It is very easy, but how to do that? We’ll look at this closer in the tutorial.

What would we like to achieve?

before disabled

Static (in this case) HTML resource located in Android assets. I used jQueryMobile to make the webpage more… ‚mobile’:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>michalu-examples</title>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript">function disableSection(id){$('#'+id+' a').addClass('ui-disabled');}</script>
</head>
<body>
 <div data-role="page" data-control-title="Home" id="page1">
 <div data-theme="a" data-role="header">
 <h3>michalu.eu | examples</h3>
 </div>
 <div data-role="content">
 <div id="section1">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section1</a>
 </div>
 <div id="section2">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section2</a>
 </div>
 <div id="section3">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section3</a>
 </div>
 <div id="section4">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section4</a>
 </div>
 <div id="section5">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section5</a>
 </div>
 </div>
 </div>
</body>
</html>

JavaScript disableSection(id) listed below disables div at given id:

function disableSection(id){$('#'+id+' a').addClass('ui-disabled');}

We need to call it after successfully loading a webpage in our example activity. But before it we should:

  • enable JavaScript engine (line 23)
  • override onPageFinished (line 26)
  • and run disableSection on each element from idsToHide array (line 33)
  • of course remember about loading resource into your webView(in this case HTML5 from local assets) (line 38)
package eu.michalu;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewActivity extends Activity {
 WebView mWebView;
 /*
 * array of div's ids to disable/hide
 */
 String[] idsToHide = { "section1", "section3", "section5" };

@Override
 public void onCreate(Bundle savedInstanceState) {
 // TODO Auto-generated method stub
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

mWebView = (WebView) findViewById(R.id.activity_webview);
 //enable javascript engine
 mWebView.getSettings().setJavaScriptEnabled(true);
 mWebView.setWebViewClient(new WebViewClient() {
 @Override
 public void onPageFinished(WebView view, String url) {
 // TODO Auto-generated method stub
 super.onPageFinished(view, url);

 //run 'disableSection' for all divs to hide/disable
 for (String s : idsToHide) {
 String surveyId = s;
 view.loadUrl("javascript:disableSection('" + surveyId + "');");
 }
 }
 });
 //load webpage from assets
 mWebView.loadUrl("file:///android_asset/list.html");
 }
}

All code is available on my github profile or just download:

github_logo

Email this to someoneDigg thisShare on Facebook2Tweet about this on TwitterShare on Google+0Helpful? Share with others!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Time limit is exhausted. Please reload the CAPTCHA.