Android webview SKIPS javascript even with setJavascriptEnabled(true) and WebChromeClient

Question

(using Samsung Galaxy Tab and Android 3.0, this is intended to work on every 3.0+ tablet, like it does in their browsers, just not webview)

I have a page with CSS an

Answer 1

I also have Samsung Galaxy Tab and Android 3.0 with jQuery javascript webpage and it works. Be sure your page is working in Crome browser and that you don't have javascript errors. There are known issues with some CSS3 styling (e.g. images disappearing) but jQuery should work. If you try to communicate with javascript be sure you do it after the page is loaded. Be seure also all files are in the right directory :). Also sometimes the content is cached so try to delete it (or delete the app).

Please provide the source code of your webpage so we can check.

Sample webview:

webView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginsEnabled(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setSupportZoom(false);

webView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
webView.setWebViewClient(new WebViewClient()
{
    @Override
    public void onPageFinished(WebView view, String url) 
    {
        // page loaded...
        super.onPageFinished(view, url);
    }
});
webView.setWebChromeClient(new WebChromeClient()
{
    @Override
    public boolean onJsAlert(WebView view, String url, String message,JsResult result) 
    {
        Log.e("alert triggered", message);
        return false;         
    }
});
webView.loadUrl("http://mypage/mypage.html");

I hope it helps.

UPDATE1: I tested your code on Samsung Galaxy tab. I changed

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

line. The page is loaded, I can see the content with picture. So... the code is working as expected. I noticed that sometimes the content is not displayed as it should be. It seams that the zooming is the problem:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

and the calculation inside $(document).ready() is false!

Btw... what you are looking for is the ViewPager with WebViews.

UPDATE2: Note also when loading webpage as file:/// you have to have JS files in the same directory (no external URLs).

Answer 2

I encountered the same problem quite some time ago - my final solution was to ditch jquery and just use plain JS. Things were constantly breaking while they worked fine when viewed from the normal Android-browser.

If those are the only lines that break the code, try reproducing the same functionality of those lines with pure JS. The Android's native webview has a pretty good support for all the latest JS goodies,

so...

$('body').css({height : height+'px', width : Math.floor(width*0.98)+'px' });
$('.text').css({height : height+'px', width : Math.floor(width*0.98)+'px' }); 
$('#firstpage').css({height : height+'px', width : Math.floor(width*0.98)+'px' }); 
$('body').prepend('<style>.text{-moz-column-count:'+numCols+';-webkit-column-count:'+numCols+';}</style>'); 

would be...

var doc = document,
    body = doc.getElementsByTagName('body')[0],
    bodyStyle = body.style,
    firstPage = doc.getElementById('firstpage'),
    firstPageStyle = firstPage.style,

    head = doc.getElementsByTagName('head')[0],
    style = doc.createElement('style'),
    rules = doc.createTextNode('.text{-webkit-column-count:'+numCols+';}');

bodyStyle.height = height + 'px';
bodyStyle.width = Math.floor(width * 0.98) + 'px';

firstPageStyle.height = height + 'px';
bodyStyle.width = Math.floor(width * 0.98) + 'px';

style.type = 'text/css';

if( style.styleSheet )
    style.styleSheet.cssText = rules.nodeValue;
else 
    style.appendChild( rules );

head.appendChild( style );

Just make sure that the above code runs after all the elements used have loaded (after DOM ready state, or before the closing of the tag )

ps. Also since you're using Android's webkit - why is there need for -moz-column-count?

Answer 3

The answer is that the javascript needs to be in functions within the HTML page <script>sections and then needs to be injected with webview.loadUrl("javascript:yourJavascriptFunction()") after webview.setWebviewClient(new WebviewClient(){ public void onPageFinishedLoading(){ ...//js injections here });

Answer 4

I'm not entirely sure if this is the cause of your problem but you should be calling loadUrl after you set up the WebView

Edit

If this isn't the problem, you might consider posting

• the simplest SSCCE that you find doesn't work but which you feel should
• the make/model of your device and the version of Android you're working with