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>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<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>
 <div data-role="page" data-control-title="Home" id="page1">
 <div data-theme="a" data-role="header">
 <h3>michalu.eu | examples</h3>
 <div data-role="content">
 <div id="section1">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section1</a>
 <div id="section2">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section2</a>
 <div id="section3">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section3</a>
 <div id="section4">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section4</a>
 <div id="section5">
 <a href="#" data-iconpos="right" data-icon="arrow-r" data-role="button">Section5</a>

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" };

 public void onCreate(Bundle savedInstanceState) {
 // TODO Auto-generated method stub

mWebView = (WebView) findViewById(R.id.activity_webview);
 //enable javascript engine
 mWebView.setWebViewClient(new WebViewClient() {
 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

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


Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *