现在很多的手机应用，都可能会直接嵌入一个web页面。这样做的好处：一个是功能更新方便，维护起来容易，只需要维护服务器的页面即可，不需要更新客户端；另一个是功能通用，不仅Android可以用，iOS也可

最新推荐文章于 2022-12-30 11:23:12 发布

韩国明星

最新推荐文章于 2022-12-30 11:23:12 发布

阅读量1k

点赞数

文章标签： android

本文链接：https://blog.csdn.net/hanguomingxing/article/details/76012888

版权

<pre name="code" class="java" style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; ">public class TestWebView extends Activity {
private WebView mWebView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.htmlview);
WebSettings webSettings = mWebView.getSettings();
// 是否允许在webview中执行javascript
webSettings.setJavaScriptEnabled(true);
// 绑定java对象到JavaScript中，这样就能在JavaScript中调用java对象，实现通信。
// 这种方法第一个参数就是java对象，第二个参数表示java对象的别名，在JavaScript中使用
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
// webview加载本地html代码，注意本地html代码必须放在工程assets目录下，然后通过
// file:///android_asset/demo.html访问
mWebView.loadUrl("file:///android_asset/demo.html");
}
public class DemoJavaScriptInterface {
public DemoJavaScriptInterface() {
}
public int mydata() {
Log.i("TEST","mydata.....");
return 0;
}
}
}</pre>
<pre style="font-family:Arial,Helvetica,simsun,u5b8bu4f53"></pre>
<pre style="font-family:Arial,Helvetica,simsun,u5b8bu4f53"></pre>
3、修改 main.xml 文件如下
<pre name="code" class="html" style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; "><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
>
<WebView android:id="@+id/htmlview"
android:layout_centerHorizontal="true" android:layout_centerVertical="true"
android:layout_marginLeft="0px" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout></pre>
4、在assets目录下，新建一个html文件：demo.html，使用JAVAScript代码编写
<pre name="code" class="javascript" style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; "><!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>
</head>
<body>this is web html
<div id="output" >test</div>
<input type="submit" value="buttons"
οnclick="document.getElementById('output').innerHTML=window.demo.mydata()"/>
</body>
</html>
</pre>
注意上面 <pre name="code" class="javascript" style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; background-color: rgb(240, 240, 240); font-family: Arial, Helvetica, simsun, u5b8bu4f53; ">οnclick="document.getElementById('output').innerHTML=window.demo.mydata()"</pre>
直接调用 window.demo.mydata() 的方法
ok, 轻松就将代码写完，现在补充说明一下用到的知识点：
先看SDK API函数介绍：
<h4 class="jd-details-title" style="margin-top:1.25em; margin-right:0px; margin-bottom:0.65em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:1.1em; background-color:rgb(226,226,226); color:rgb(58,58,58); font-family:Arial,Helvetica,simsun,u5b8bu4f53"><a name="t0"></a>
public void addJavascriptInterface (<a href="http://developer.android.com/reference/java/lang/Object.html" style="color:rgb(0,102,153)">Object</a> obj, <a href="http://developer.android.com/reference/java/lang/String.html" style="color:rgb(0,102,153)">String</a> interfaceName)</h4>
<div class="jd-tagdata jd-tagdescr" style="margin-top:0.25em; margin-right:0px; margin-bottom:0.75em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1em; font-family:Arial,Helvetica,simsun,u5b8bu4f53">
<p style="margin-top:0.5em; margin-right:0px; margin-bottom:0.5em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1.3em">
Use this function to bind an object to JavaScript so that the methods can be accessed from JavaScript.
<p style="margin-top:0.5em; margin-right:0px; margin-bottom:0.5em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1.3em">
IMPORTANT:
<ul style="margin-top:0px; margin-right:2.5em; margin-bottom:0px; margin-left:2.5em; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1.3em">
<li style="margin-top:0px; margin-right:0px; margin-bottom:0.25em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1.3em">
Using addJavascriptInterface() allows JavaScript to control your application. This can be a very useful feature or a dangerous security issue. When the HTML in the WebView is untrustworthy (for example, part or all of the HTML is provided by some person or
process), then an attacker could inject HTML that will execute your code and possibly any code of the attacker's choosing.
Do not use addJavascriptInterface() unless all of the HTML in this WebView was written by you.</li><li style="margin-top:0px; margin-right:0px; margin-bottom:0.25em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1.3em">
The Java object that is bound runs in another thread and not in the thread that it was constructed in.</li></ul>
<p style="margin-top:0.5em; margin-right:0px; margin-bottom:0.5em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1.3em">
<p style="margin-top:0.5em; margin-right:0px; margin-bottom:0.5em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; line-height:1.3em">
</div>
<div class="jd-tagdata" style="margin-top:0.5em; margin-right:1em; margin-bottom:0.5em; margin-left:1em; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-family:Arial,Helvetica,simsun,u5b8bu4f53">
<h5 class="jd-tagtitle" style="margin-top:1em; margin-right:0px; margin-bottom:0.65em; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:1em; color:rgb(58,58,58)"><a name="t1"></a>
Parameters</h5>
<table class="jd-tagtable " style="margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:1em; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:1em; border-collapse:collapse; empty-cells:show">
<tbody style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial">
<tr style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial">
<th style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:2px; padding-right:10px; padding-bottom:2px; padding-left:10px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:initial; border-color:initial; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none; text-align:left; vertical-align:top; background-color:rgb(255,255,255); border-width:initial; border-color:initial; font-weight:normal; font-style:italic">
obj</th>
<td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:2px; padding-right:10px; padding-bottom:2px; padding-left:10px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:initial; border-color:initial; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none; text-align:left; vertical-align:top; background-color:rgb(255,255,255); border-width:initial; border-color:initial; font-weight:normal">
The class instance to bind to JavaScript, null instances are ignored.</td>
</tr>
<tr style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial">
<th style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:2px; padding-right:10px; padding-bottom:2px; padding-left:10px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:initial; border-color:initial; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none; text-align:left; vertical-align:top; background-color:rgb(255,255,255); border-width:initial; border-color:initial; font-weight:normal; font-style:italic">
interfaceName</th>
<td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:2px; padding-right:10px; padding-bottom:2px; padding-left:10px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:initial; border-color:initial; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none; text-align:left; vertical-align:top; background-color:rgb(255,255,255); border-width:initial; border-color:initial; font-weight:normal">
The name to used to expose the instance in JavaScript.</td>
</tr>
</tbody>
</table>
</div>
通过addJavascriptInterface(Object obj,String interfaceName)这个方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是
interfaceName（demo），作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。
再补充下在开发过程中应该注意几点：
1、AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web
page not available错误
2、如果访问的页面中有Javascript，则webview必须设置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
3、如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖webview的WebViewClient对象。
mWebView.setWebViewClient(new
WebViewClient(){
<pre name="code" class="java" style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; "> @Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});</pre>
4、如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。
<pre name="code" class="java"><pre name="code" class="java" style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; "><pre name="code" class="java"> @Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}</pre>
5、addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用Handler的目的。如此上面的代码则可以修改成如下即可，利用Handler发送消息进行处理：
<pre></pre>
<pre name="code" class="java" style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; "><pre name="code" class="java"> public int mydata() {
mHandler.post(new Runnable() {
public void run() {
Log.i("TEST", "mydata.....");
}
});
return 0;
}
</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre></pre></pre>