Android WebView doesn't load jQuery

Question

I'm making a webapp and I'm using jQuery.

I've made a simple android application with a WebView in it, and I load my url: www.mydomain.com

In mydomain.com I have:

<script src="js/jquery_1.4.2_min.js"></script> 

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
 alert("Hii!!!!");
});
</script>

If I visit mydomain from the browser, the alert shows fine. But If I visit from my native application, it doesn't show. What can I do?

Yes. It is loaded. Ive edited the code. It works fine in browser but not from app. — Klian, Jul 19 '11 at 16:37
does it work even if you dont use jQuery and just do a plain ol' alert? — Naftali, Jul 19 '11 at 16:47
Ive just put browser.getSettings().setJavaScriptEnabled(true); before browser.setWebViewClient and it works... :) thanks! — Klian, Jul 19 '11 at 17:06

score 19 · Accepted Answer · answered Jul 19 '11 at 16:45

19

Is JavaScript enabled in your webview...?

WebView.getSettings().setJavaScriptEnabled(true);

answered Jul 19 '11 at 16:45

Torid

4,176
1
28
29

yes `browser = new WebView(this); browser.setWebViewClient(new WebViewClient() { ..... setContentView(browser); browser.getSettings().setJavaScriptEnabled(true); browser.loadUrl("http://mydomain.com");` – Klian Jul 19 '11 at 16:50

score 7 · Answer 2 · answered May 21 '12 at 04:56

7

Old question, but thought i'd add my 2cents anyway.

Javascript alerts do work in a webview, but you have to set the Web chrome client first.

webView.setWebChromeClient(new WebChromeClient())

answered May 21 '12 at 04:56

Stimsoni

3,166
2
29
22

Thanks. This is the best answer for me – Osama Mar 29 '20 at 16:54

score 5 · Answer 3 · answered Oct 05 '11 at 15:59

I'm no expert with Android native but we have just developed an app using jQuery based site within a webview. You need setJavaScriptEnabled(true) in your activity class and jQuery runs jsut fine. However your example with alert('Hi'); will not work because Android webviews don't support alerts by default. It can be enabled with a little googling... http://lexandera.com/2009/01/adding-alert-support-to-a-webview/

Alternatively we added a custom showAlert js function to display pretty user notifications.

score 3 · Answer 4 · answered Aug 05 '12 at 15:08

Where is your js/jquery_1.4.2_min.js script located? If it is located in your assets directory, then you should initialize the webView giving it the assets directory as baseUrl:

webView.loadDataWithBaseURL("file:///android_asset/", data, "text/html", "UTF-8", null);

or

webView.loadUrl("file:///android_asset/file.html");

You could try to create a simple .js file with a simple function like

function dummy(document) { document.write("Hooray it works"); }

and try to access the dummy function in your html to test if the .js file is included.

score 3 · Answer 5 · edited Jun 29 '15 at 20:52

3

You may need two things:

webSettings.setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());

edited Jun 29 '15 at 20:52

josliber

43,891
12
98
133

answered Jun 29 '15 at 20:19

Gth lala

322
2
4

score 0 · Answer 6 · answered Jan 16 '13 at 13:53

Try this one: Create a Main Activity.

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

      public class MainActivity extends Activity {
       private WebView webView;
        private JavaScriptInterFace javaScriptInterFace;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView=(WebView)findViewById(R.id.webView);
    javaScriptInterFace=new JavaScriptInterFace(this);
    webView.addJavascriptInterface(javaScriptInterFace, "AndroidFunction");
    webView.getSettings().setJavaScriptEnabled(true); 
    webView.loadUrl("file:///android_asset/test.html");
    webView.setWebViewClient(new WebViewClient());

   }



      }

Create another java file named JavaScriptInterFace

    import android.content.Context;
    import android.util.Log;
      import android.widget.Toast;

        public class JavaScriptInterFace {
 Context mContext;

 JavaScriptInterFace(Context c) {
     mContext = c;
             }

 public int changeImage(){
    Log.e("Got", "it"+2); 
     return 2;
 }

 public void showToast(){
     Toast.makeText(mContext, "hi", Toast.LENGTH_SHORT).show();
 }

     }

the creat a html file put this one in project's asset folder

     <!DOCTYPE html>
       <html>
         <head>
            <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width; user-scalable=0;" />
       <title>My HTML</title>
      </head>
        <body>
         <p id="mytext">Hello!</p>
             <img alt="show" src="ic_left_arrow.png" id="myImage"/>
           </br>
           <input type="button" value="Change" onClick="changeImage()" />
           <input type="button" value="Show tost" onClick="showToast()" />

           <script language="javascript">
             function changeImage() {
               i=AndroidFunction.changeImage();
            if(i===2){
           document.getElementById('mytext').innerHTML = i;
           document.getElementById('myImage').src="ic_right_arrow.png";
        }
           }
          function showToast() {
              AndroidFunction.showToast();
          }

         </script>

           </body>
            </html>

Put the required images in asset folder of your project along with the above html file.

score 0 · Answer 7 · answered Nov 19 '17 at 06:55

Correct sequence-

webview.getSettings().setJavaScriptEnabled(true); webview.loadUrl("file:///android_asset/xxx.html");

By mistake dont put your invocation sequence go wrong like below

webview.loadUrl("file:///android_asset/xxx.html"); webview.getSettings().setJavaScriptEnabled(true);

score 0 · Answer 8 · answered Jul 23 '11 at 20:38

The problem seems to be the location of the jquery.js file. Post some code about how you are setting up the webView. That would give us some hints.

For an example, look at this: http://techdroid.kbeanie.com/2010/10/android-webview-javascript-and-css.html

Android WebView doesn't load jQuery

8 Answers8

Linked