android WebView component usage summary

Browser controls are available in every development environment, providing a place for the magic of vests. windows has webbrowser, android and ios have webview. Only the engine is different, compared to Microsoft webbrowser, android and ios webview engines are webkit, Html5 support. This article mainly introduces the power of webview of android.

How do webview components use
1) add permissions: the license "android.permission.INTERNET" must be used in AndroidManifest.xml, otherwise the Web page not available error will occur.
2) generate 1 WebView component in Activity: WebView webView = new WebView(this); Or you can add the webview control to the layout file of activity:

 
<WebView 
android:id="@+id/wv" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:text="@string/hello" 
/> 

3) set WebView basic information:
If Javascript is on the page being visited, webview must be set to support Javascript.
webview.getSettings().setJavaScriptEnabled(true);
Touch the focus works
requestFocus();
Cancel scroll bar
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
4) set the page to be displayed by WevView:
Internet use: webView loadUrl (" http: / / www. google. com ");
webView.loadUrl ("file:///android_asset/ XX.html "); Local files are stored in: assets files.
5) if you want to click the link, it will be handled by yourself, instead of responding to the link in browser of the newly opened Android system. Add an event listener to WebView (WebViewClient) and override some of the methods:
shouldOverrideUrlLoading: response to hyperlink buttons in web pages. WebViewClient calls this method when a connection is pressed, passing the argument: pressed url. For example, when a number is clicked on an webview inline page, it will automatically assume that this is a phone request and will pass url: tel:123.

 
public boolean shouldOverrideUrlLoading(WebView view,String url){ 
if(url.indexOf("tel:")<0){// Having a number on the page causes a connection to the phone  
view.loadUrl(url); 
} 
return true; 
} 

also has some other overridden methods called
1, receive the event requested by Http
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
2. The event before opening the link
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }
This function allows us to do a lot of things, such as we read some special URL, so we can not open the address, cancel this operation, and do other predefined operations, which is very necessary for a program.
3. Load the completed events of the page
public void onPageFinished(WebView view, String url){ }
By the same token, we know that 1 page has been loaded, so we can close loading and switch program actions.
Load the event at the beginning of the page
public void onPageStarted(WebView view, String url, Bitmap favicon) { }
This event is the start of the page load call, usually we can set up an loading page here to tell the user that the program is waiting for a network response.
Through these events, we can easily control the program operation, 1 side USES the browser to display the content, 1 side monitors the user's operation to achieve the various display modes we need, and at the same time can prevent the user to produce the wrong operation.
6) if you use webview point link to read many pages, if you do not do any processing, click the system "Back" key, the entire browser will call finish() and end itself. If you want to browse the web back rather than exit the browser, you need to process and consume the Back event in the current Activity.
Overrides the onKeyDown(int keyCoder,KeyEvent event) method of the Activity class.

 
public boolean onKeyDown(int keyCoder,KeyEvent event){ 
if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){ 
webview.goBack(); //goBack() Said to return to webView On the 1 page  
return true; 
} 
return false; 
} 

Webview interacts with js
The two-way interaction between Webview and js is the strength of webview of android, and it is also the basic guarantee for the thorough implementation of the waistcoat spirit.
First, webview can define an event that can be triggered in its embedded page

 
wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo"); 
private final class DemoJavaScriptInterface 
{ 
DemoJavaScriptInterface(){} 
public void clickonAndroid( final String order){ 
mHandler.post(newRunnable(){ 
@Override 
public void run(){ 
jsonText="{"name":""+order+""}"; 
wv.loadUrl("javascript:wave("+jsonText+")"); 
} 
}); 
} 
} 

With the above code, you can trigger the window.demo.clickOnAndroid (str) event in its embedded page and pass the parameter str to webview. After Webview receives str, the js function wave(str) in its embedded page can be triggered by the above code. This enables the web page to trigger the webview event and pass the parameters, and webview to receive the parameters and call the js function.
see my Html script below:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script> 
function toclient() 
{ 
var order=$("#val").val(); 
window.demo.clickonAndroid(order); 
} 
function wave(str){ 
//alert(str.name); 
$("#fromclient").text(str.name); 
} 
</script> 
</head> 
<body> This is a 1 a html page  
<br/> 
 The input 1 String: <br/> 
<input id="val" /> 
<input type="submit" value=" Click submit to client " 
onclick="toclient();"/> 
<br /> 
 Display returns: <label id="fromclient"></label> 
</body> 
</html> 

According to the script, wave (str) function is responsible for retrieving the data originally sent to webview back to the page. The effect diagram is as follows:
In addition, if you want to get some processing data of the page and send it to the webview client for processing, you can rewrite the onJsAlert function of WebChromeClient in wave function alert
wv.setWebChromeClient(new MyWebChromeClient());

 
final class MyWebChromeClient extends WebChromeClient{ 
@Override 
public booleanonJsAlert(WebView view, String url, String message, final JsResult result) { 
//message is wave In the function alert The string so that you can android The client handles this data  
result.confirm(); 
} 
return true; 
}