Call jQuery function in Android's WebView from Java?

Question

I am trying to call javascript function which is defined in html like

WebView.loadUrl("javascript:hoge()");

I can call non-jQuery function, but I can't call the function which I defined inside the '$(document).ready(function(){})(jQuery);', like bellow.

<script>
//I can call this function by webview.loadUrl("javascript:something()");
function something(){
    //do something
}

$(document).ready(function(){
    //but I can't call this function by webview.loadUrl("javascript:hoge()");
    function hoge(){
        //do something.
    }
})(jQuery);
</script>

Is there a way to call hoge() from Java like ordinary javascript function?

I found that I can use jQuery Selector even if the function is not inside '$(document).ready(function(){})(jQuery);', but I also find that with that workaround, I can't use additional jQuery library.

belllow is the actual code.

https://github.com/YoshimuraSei/AndrOutliner/tree/master/Outliner

and this is html file https://github.com/YoshimuraSei/AndrOutliner/blob/master/Outliner/assets/www/treeview.html

and this is java code which I am trying to call javascript function. https://github.com/YoshimuraSei/AndrOutliner/blob/master/Outliner/src/com/yslibrary/android/outliner/TreeViewFragment.java

on line 100, I am trying to call javascript function'test1()'(see line34 of the html file), and it can be called since currently it is not inside '$(document).ready(function(){})(jQuery);', but I can't call extra jQuery library method 'nestedSortable()' from test1().

How can I solve this?

Edit:
Or is this just a timing of loading jQuery library and plugins?
I got these error after load html to webview.

Uncaught TypeError: Cannot read property 'mouse' of undefined--From line 7 of file:///android_asset/www/js/jquery.ui.mouse.touch.js
Uncaught TypeError: Cannot read property 'sortable' of undefined--From line 15 of file:///android_asset/www/js/jquery.ui.nestedSortable.js

'mouse' and 'sortable' are properties of jquery.ui, which should be loaded before these 2 files are loaded, so I assume that Load order is little bit strange. any idea?

yshrsmz · Accepted Answer · 2014-02-08 01:40:39Z

1

I'm currently working as a JavaScript engineer. From this experience, now I can see what was wrong. It's a scope & timing related issue.
Functions inside the $(document).ready(function(){}); cannot be called from outside, since they are not global. if you want to call them from outside, you have to make it global. And you have to wait until javascript is fully loaded and ready to be used.

$(document).ready(function(){
    // make it global function
    window.foo = function(){
        //do something.
    }

    // call java method that notifies java that js is ready to use.
    // (you should implement JavascriptInterface class & method)
    window.JsInterface.jsReady();
})(jQuery);

you have to expose functions to Global.
you have to wait until javascript is ready.

answered Feb 8, 2014 at 1:40

yshrsmz

1,1792 gold badges15 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Galaxy Over a year ago

That explains a lot. I noticed that if I also put the function inside the main HTML page (the one first loaded by loadUrl()), then the second loadUrl() javascript call could find the function. However if I moved the function into a .js file, it stopped working.

yshrsmz Over a year ago

@MichaelR.Hines not tested, but this would help: stackoverflow.com/a/17041561/855599

Marty · Accepted Answer · 2012-01-17 11:44:20Z

0

What you can do is pass a query string parameter when you call the webview (eg. method=hoge).

Then in your javascript you can check the existance of the param and run the hoge() method accordingly

Not sure if your interested, but you can also call your android java code from javascript using the android javascript interface, see http://developer.android.com/guide/webapps/webview.html

answered Jan 17, 2012 at 11:44

Marty

2,9735 gold badges34 silver badges46 bronze badges

2 Comments

yshrsmz Over a year ago

Thank you for the answer. you mean, I have to reload html each time when I want to use method, right?

yshrsmz Over a year ago

problem solved. the problem was a typo. and thank you for the info about android javascript interface. I found the way to pass javascript function return value to Java code.

eyurdakul · Accepted Answer · 2012-03-26 10:26:36Z

0

well, you can always call a javascript function using loadUrl methode of your webview;

myWebView.loadUrl("Javascript: alert('test');");

answered Mar 26, 2012 at 10:26

eyurdakul

9122 gold badges12 silver badges29 bronze badges

Comments

Mohamed Slimane · Accepted Answer · 2019-10-29 16:15:18Z

0

Just add to your html file a jquery function and named for example show_main_pop :

function show_main_pop(){
  $('#r_and_h').fadeIn(500);
}

and in android studio call this function like that:

webframe.loadUrl("javascript: show_main_pop();")

answered Oct 29, 2019 at 16:15

Mohamed Slimane

3113 silver badges16 bronze badges

Collectives™ on Stack Overflow

Call jQuery function in Android's WebView from Java?

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related