When we want to achieve rich graphics and text mixing effect, we usually use WebView, this is a very powerful control, to see the official explanation:
Copy Code code as follows:
A View that displays Web pages. This class is the basis upon which can roll your own web browser or simply display some online content within your ACT Ivity. It uses the WebKit rendering engine to display Web pages and includes methods to navigate forward and backward through a h istory, zoom, perform text searches and more.
A view that displays the contents of a Web page. This class is the basis for you to implement a browser of your own, or to display the content of a Web page in an activity, based on the WebKit kernel, and includes a page, zoom, and text search method.
From the above you should know the basic function, that is, display the Web page. In this article we mainly discuss the interaction between WebView and JavaScript. If your JS base is better than the Java Foundation then it is a good choice to do some complex processing in this way.
WebView and JS interaction includes two aspects, one is in the HTML through JS call Android Java code, and the second is in Android Java code to call JS.
One, HTML call Java code through JS
JS call Java code in fact, remember a bit, WebView set A and JS interface (Note that this is just the general meaning of the interface in Java is not the meaning), this interface is actually a general class, and for this interface to take an alias. This process is as follows:
Copy Code code as follows:
Mwebview.addjavascriptinterface (New Demojavascriptinterface (), "demo");
The new demojavascriptinterface is this interface, and demo is the alias of this interface.
The above code can invoke any method in the Newdemojavascriptinterface class by alias (Here is "demo") in the HTML JS after execution.
If we want a button in HTML to click on a function in Java, you can do this:
Copy Code code as follows:
<input type= "button" value= "click Me" onclick= "window.demo.clickOnAndroid ()"/>
However, because of security issues, in Android4.2 (if the applied android:targetsdkversion value is 17+) JS can only access Java functions with @JavascriptInterface annotations. So if your development version is relatively high, you need to add @javascriptinterface annotations to the called function.
Here is the code example given by Google:
Webviewdemo.java
Copy Code code as follows:
Package Com.google.android.webviewdemo;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.os.Handler;
Import Android.util.Log;
Import Android.webkit.JsResult;
Import android.webkit.WebChromeClient;
Import android.webkit.WebSettings;
Import Android.webkit.WebView;
/**
* Demonstrates and embed a webview in your activity. Also demonstrates how
* To have JavaScript in the "WebView call into" activity
* can invoke JavaScript.
* <p>
* In this example, clicking on the android in the WebView'll result
* The activities code in {@link demojavascriptinterface#clickonandroid ()}. This Code
* Would turn around and invoke JavaScript using the {@link Webview#loadurl (String)}
* method.
* <p>
* Obviously all of this could have been accomplished without to the activity
* And then back into JavaScript, but this code is intended the
* Code paths for this sort of communication.
*
*/
public class Webviewdemo extends activity {
private static final String Log_tag = "Webviewdemo";
Private WebView Mwebview;
Private Handler Mhandler = new Handler ();
@Override
public void OnCreate (Bundle icicle) {
Super.oncreate (Icicle);
Setcontentview (R.layout.main);
Mwebview = (webview) Findviewbyid (R.id.webview);
WebSettings websettings = Mwebview.getsettings ();
Websettings.setsavepassword (FALSE);
Websettings.setsaveformdata (FALSE);
Websettings.setjavascriptenabled (TRUE);
Websettings.setsupportzoom (FALSE);
Mwebview.setwebchromeclient (New Mywebchromeclient ());
Mwebview.addjavascriptinterface (New Demojavascriptinterface (), "demo");
Mwebview.loadurl ("file:///android_asset/demo.html");
}
Final class Demojavascriptinterface {
Demojavascriptinterface () {
}
/**
* This isn't called on the UI thread. Post a runnable to invoke
* Loadurl on the UI thread.
*/
public void Clickonandroid () {
Mhandler.post (New Runnable () {
public void Run () {
Mwebview.loadurl ("Javascript:wave ()");
}
});
}
}
/**
* Provides a hook for calling ' alert ' from JavaScript. Useful for
* Debugging your JavaScript.
*/
Final class Mywebchromeclient extends Webchromeclient {
@Override
public boolean Onjsalert (WebView view, string URL, string message, jsresult result) {
LOG.D (log_tag, message);
Result.confirm ();
return true;
}
}
}
Demo.html
Copy Code code as follows:
<script language= "JavaScript" >
/* This function are invoked by the activity * *
Function Wave () {
Alert ("1");
document.getElementById ("Droid"). src= "Android_waving.png";
Alert ("2");
}
</script>
<body>
<!--Calls into the JavaScript interface for the-->
<a onclick= "window.demo.clickOnAndroid ()" ><div style= "width:80px;
margin:0px Auto;
padding:10px;
Text-align:center;
border:2px solid #202020; ">
<br>
Click me!
</div></a>
</body>
Main.xml
Copy Code code as follows:
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
android:orientation= "Vertical"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
>
<textview
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:text= "@string/intro"
Android:padding= "4dip"
Android:textsize= "16SP"
/>
<webview
Android:id= "@+id/webview"
Android:layout_width= "Fill_parent"
android:layout_height= "0dip"
android:layout_weight= "1"
/>
</LinearLayout>
Second, Android call JS
The above code demonstrates how to invoke Java code in JS while also demonstrating how to call JS in Java
Call form:
Copy Code code as follows:
Mwebview.loadurl ("Javascript:wave ()");
where Wave () is a method in JS, of course, you can change this method to other methods, that is, Android calls other methods.
Demo's Explanation:
Now you must know the interaction between Android and JS. It is time to analyze some demo, according to the above you should also be more clear. The specific interaction process is as follows:
① Click on the picture, then in the JS-side directly invoke the method of Android Clickonandroid ();
②clickonandroid () method (using threads) to invoke the JS method.
③ is ② called JS to directly control HTML.
Personal Summary: The use of webview this way in some cases, the UI layout can be translated into the corresponding HTML code written, and HTML layout style such as the DW such a powerful tool, and the Internet a lot of source code, a lot of coding. The UI and visual effects save a lot of time, and it doesn't make any sense to reinvent the wheel.
