WebView是Android 提供的操作网页的一个组件。
使用loadUrl和loadData
WebView.loadUrl：打开URL页面（本地或远端）。
WebView.goForward：实现浏览器的前进功能。
WebView.goBack：实现浏览器的回退功能。
WebView.loadData：加载HTML数据。
1：使用WebView.loadUrl 浏览网页m_Webview = (WebView) findViewById(R.id.webview);
m_Webview.setWebViewClient(new WebViewClient(){});
m_Webview.loadUrl(m_Url.getText().toString());
//前进
if (m_Webview.canGoForward())
{ m_Webview.goForward(); }
//后退
if (m_Webview.canGoBack())
{ m_Webview.goBack(); }
2：使用WebView.loadData解析HTML
String customHtml = "<html><body><h1>Hello</h1></body></html>";
m_Url.setText(customHtml);
m_Webview.loadData(m_Url.getText().toString(),"text/html","UTF-8");
WebView.loadUrl 与 WebView.loadData 区别
通过两个测试结果可以很清楚的看到这两个接口使用时的区别，
一个是输入的网址，另一个输入的是网页的代码。
WebView并不是一个单纯的能加载URL显示网页的控件，它本身也是一个浏览器的引擎，
基于这一点，也许可以加以利用，开发出更有趣的App。
与JavaScript的交互
WebView与JavaScript的交互其实本质上是WebView中定义的WebClient的浏览器引擎与javascript的交互。
】浏览器引擎处理javascript的同时也提供给Andriod一些接口，使它能够接收到信息并且进行响应。
处理方式：
- Android代码中实现Javascript接口的处理
javascript::alert() === WebChromeClient::onJsAlert()
javascript::confirm() === WebChromeClient::onJsConfirm()
javascript::prompt() === WebChromeClient::onJsPrompt()
当javascript调用它的函数时，也会触发Android调用响应的接口。
Android提供自定义接口供Javascript使用。
这里用到的主要是WebChromeClient::addJavascriptInterface()接口。其中实现的一些接口函数可以供javascript程序来调用。
Android与Javascript通过消息交互。
这里使用的是WebChromeClient::onConsoleMessage()接口，
它为Android提供了处理javascript日志消息的一种能力，也可以作为消息传递的一种方式。
JS页面定义和预览<html>
<head>
<scripttype="text/javascript">
functiondoAlert() {
alert("Alert I am from JS!");
}
functiondoConfirm() {
confirm("Confirm from JS");
}
functiondoPrompt()
{
var val = prompt("Prompt from JS, please input");
if (val)
{
document.getElementById('id_name').value = val
}
}
functionCustimizeFunc()
{ CustimizeAndroidFunc.popupDialogue(); }
functionShowReturn()
{
var retResult = CustimizeAndroidFunc.showResult();
var dspList = document.getElementById("DispList");
var div = document.createElement("div");
div.innerHTML = retResult;
dspList.appendChild(div);
}
</script>
</head>
<bodybackground="black">
<inputtype="button"value="Alert Test"onclick="doAlert()"/><br/><br/>
<inputtype="button"value="Confirm Test"onclick="doConfirm()"/><br/><br/>
<inputtype="button"value="Prompt Test"onclick="doPrompt()"/><br/>
<inputtype="text"id="id_name"name="name_a" /><br/><br/>
<inputtype="button"value="Custimize Function Popup"onclick="CustimizeFunc()"/><br/><br/>
<inputtype="button"value="Custimize Function ShowList"onclick="ShowReturn()"/><br/><br/>
<divid="DispList"></div>
</body>
</html>
程序运行结果
MainActivity.java
注意： @JavascriptInterface 在Android较新的版本中为了防止JS能够通过反射取得Java类所有的接口，在定义接口时增加了一个@JavascriptInterface属性，只有带有这个标志函数才能在JS中被访问。
<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.example.internet_webview_jswork;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.os.Bundle;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.annotation.SuppressLint;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.app.Activity;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.app.AlertDialog;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.DialogInterface;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.LayoutInflater;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.Menu;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.View;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.webkit.JavascriptInterface;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.webkit.JsPromptResult;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.webkit.JsResult;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.webkit.WebChromeClient;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.webkit.WebView;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.EditText;<span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@SuppressLint</span>({ <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"JavascriptInterface"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"SetJavaScriptEnabled"</span> })<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">MainActivity</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Activity</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> WebView m_Webview; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> WebChromeClient m_Client; <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onCreate</span>(Bundle savedInstanceState) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onCreate(savedInstanceState); setContentView(R.layout.activity_main); m_Webview = (WebView) findViewById(R.id.webview); m_Webview.getSettings().setJavaScriptEnabled(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>); m_Client = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> WebChromeClient() { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">onJsAlert</span>(WebView view, String url, String message, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> JsResult result) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AlertDialog.Builder(MainActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>) .setTitle(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"JS Call alert and Android show Alert Dialogue"</span>) .setMessage(message) .setPositiveButton(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"YES"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DialogInterface.OnClickListener() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(DialogInterface dialog, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> which) { result.confirm(); } }).create().show(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>; } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">onJsConfirm</span>(WebView view, String url, String message, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> JsResult result) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AlertDialog.Builder(MainActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>) .setTitle(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"JS Call confirm and Android show Confirm Dialogue"</span>) .setMessage(message) .setPositiveButton(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"YES"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DialogInterface.OnClickListener() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(DialogInterface dialog, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> which) { result.confirm(); } }) .setNegativeButton(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"NO"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DialogInterface.OnClickListener() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(DialogInterface dialog, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> which) { result.cancel(); } }).create().show(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>; } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">onJsPrompt</span>(WebView view, String url, String message, String defaultValue, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> JsPromptResult result) { LayoutInflater inflater = getLayoutInflater(); View prompt = inflater.inflate(R.layout.js_prompt_layout, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> EditText etJSPromptValue = (EditText) prompt.findViewById(R.id.etJSPrompt); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AlertDialog.Builder(MainActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>) .setTitle(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"JS Call prompt and Android show Prompt Dialogue"</span>) .setView(prompt) .setPositiveButton(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"YES"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DialogInterface.OnClickListener() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(DialogInterface dialog, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> which) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Here will confirm the Android text to JS</span> result.confirm(etJSPromptValue.getText().toString()); } }) .setNegativeButton(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"NO"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DialogInterface.OnClickListener() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(DialogInterface dialog, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> which) { result.cancel(); } }).create().show(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>; } }; m_Webview.setWebChromeClient(m_Client); m_Webview.addJavascriptInterface(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Object() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@SuppressWarnings</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"unused"</span>) <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@JavascriptInterface</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">popupDialogue</span>() { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AlertDialog.Builder(MainActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>) .setTitle(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"JS Call Android popupDialogue"</span>) .setMessage(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"JS Call Android Custimized function::popupDialogue"</span>) .setPositiveButton(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"YES"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DialogInterface.OnClickListener() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(DialogInterface dialog, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> which) {} }) .setNegativeButton(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"NO"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DialogInterface.OnClickListener() { <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(DialogInterface dialog, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> which) {} }).create().show(); } <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@SuppressWarnings</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"unused"</span>) <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@JavascriptInterface</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> String <span class="hljs-title" style="box-sizing: border-box;">showResult</span>() { String strRet = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"I am the message from Android"</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> strRet; } }, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"CustimizeAndroidFunc"</span>); m_Webview.loadUrl(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"file:///android_asset/js_work.html"</span>); } <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">onCreateOptionsMenu</span>(Menu menu) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Inflate the menu; this adds items to the action bar if it is present.</span> getMenuInflater().inflate(R.menu.main, menu); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>; }</code>
0 0
