Thanks to a blogger at the reference link for a awesome explanation !
The details can be referenced at the link at the bottom. The following is a recording of what I've tested in my workspace:
[JavascriptHandler.java]
import android.webkit.JavascriptInterface;
public class JavaScriptHandler {
Webview_test parentActivity;
public JavaScriptHandler(Webview_test activity) {
parentActivity = activity;
}
@JavascriptInterface <-- need to have this since API lvl 17 for any methods that could be used from JS function
public void setResult(int val){
this.parentActivity.javascriptCallFinished(val);
}
}
[webview_test.java]
public class Webview_test extends Activity {
WebView myWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview_test);
// Show the Up button in the action bar.
setupActionBar();
Intent intent = getIntent();
String url = intent.getStringExtra("xml_url");
myWebView = (WebView) findViewById(R.id.webview);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setBuiltInZoomControls(true);
myWebView.setWebChromeClient(new WebChromeClient());
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl("file:///android_asset/testRet.html");
myWebView.addJavascriptInterface(new JavaScriptHandler(this), "MyHandler");
}
public void javascriptCallFinished(int val){
System.out.println(val);
}
...
public void testAndroid2JS(View view) throws IOException
{
myWebView.loadUrl("javascript:window.MyHandler.setResult(ret_something());");
}
[testRet.html]
<HTML>
<center><b><u>JavaScript</u></b></center>
<script language="JavaScript">
function ret_something() {
return 999;
}
</script>
</head>
<body>
<p> Enter your name here <input type="text" id="namefromjs" />
<p> <input type="button" onclick= "setData()" value="Call Android sayHelloFromAndroid() method from JS">
<p> Data pass from Android</p>
<p> <input type="button" onclick= "getData()" value="Get Name From Android EditText">
<p> Name from Android is <input type="text" id="namefromAndroid" />
</body>
</HTML>
------------------------------------------------------------------------------------------------------
Sometimes you want to call JS functions after loading a web page. Or,
you just simply feel like using some JS funtions to do something. The
following code snippet shows a way to achieve this:
[Webview_test activity]
public class Webview_test extends Activity {
...
myWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
view.loadUrl("javascript:(function() { "
+ " document.bgColor='#FF0000';" //turns to red the background color
+ " var script=document.createElement('script'); "
+ " script.setAttribute('type','text/javascript'); "
+ " script.setAttribute('src', 'file:///android_asset/pptv.js'); "
+ " script.onload = function(){ "
+ " window.MyHandler.setResult(test()); "
+ " }; "
+ " document.getElementsByTagName('head')[0].appendChild(script); "
+ "})()");
}
});
...
}
...
public void testAndroid2JS(View view) throws IOException
{
myWebView.loadUrl("file:///android_asset/testalert2.html");
}
}
[pptv.js]
function test()
{
return "test...";
}
[testalert2.html]
<HTML>
<head>
<center><b><u>JavaScript</u></b></center>
</head>
<body>
<p> Enter your name here <input type="text" id="namefromjs" />
<p> <input type="button" onclick= "setData()" value="Call Android sayHelloFromAndroid() method from JS">
<p> Data pass from Android</p>
<p> <input type="button" onclick= "getData()" value="Get Name From Android EditText">
<p> Name from Android is <input type="text" id="namefromAndroid" />
</body>
</HTML>
Reference links
http://blog.objectgraph.com/index.php/2012/03/16/android-development-javascript-bridge-example-fully-explained/
http://stackoverflow.com/questions/5649111/android-webview-loading-javascript-file-in-assets-folder
沒有留言:
張貼留言