http://yarin.iteye.com/?page=4
Activity01.java
package com.yarin.android.Examples_08_07; import android.app.Activity; import android.os.Bundle; import android.webkit.JavascriptInterface; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebView; public class Activity01 extends Activity { private WebView mWebView; private PersonalData mPersonalData; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mPersonalData = new PersonalData(); mWebView = (WebView) this.findViewById(R.id.WebView01); // 设置支持JavaScript mWebView.getSettings().setJavaScriptEnabled(true); // 把本类的一个实例添加到js的全局对象window中， // 这样就可以使用window.PersonalData来调用它的方法 mWebView.addJavascriptInterface(this, "PersonalData"); // 如果不设置这个，JS代码中的按钮会显示，但是按下去却不弹出对话框 // Sets the chrome handler. This is an implementation of WebChromeClient // for use in handling JavaScript dialogs, favicons, titles, and the // progress. This will replace the current handler. mWebView.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { // TODO Auto-generated method stub return super.onJsAlert(view, url, message, result); } }); // 加载网页 // mWebView.loadUrl("file:///android_asset/PersonalData_new.html"); mWebView.loadUrl("file:///android_asset/PersonalData.html"); } // 在js脚本中调用得到PersonalData对象 @JavascriptInterface public PersonalData getPersonalData() { return mPersonalData; } // js脚本中调用显示的资料 class PersonalData { String mID; String mName; String mAge; String mBlog; public PersonalData() { this.mID = "123456789"; this.mName = "Android"; this.mAge = "100"; this.mBlog = "http://yarin.javaeye.com"; } public String getID() { return mID; } public String getName() { return mName; } public String getAge() { return mAge; } public String getBlog() { return mBlog; } } }
PersonalData_new.html
<html> <head> <script type="text/javascript"> function showAndroidToast(toast) { var personaldata_new = PersonalData.getPersonalData(); alert(personaldata_new); var personaldata = window.PersonalData.getPersonalData(); if(personaldata) { var Personaldata = document.getElementById("Personaldata"); pnode = document.createElement("p"); tnode = document.createTextNode("ID:" + personaldata.getID()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); pnode = document.createElement("p"); tnode = document.createTextNode("Name:" + personaldata.getName()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); pnode = document.createElement("p"); tnode = document.createTextNode("Age:" + personaldata.getAge()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); pnode = document.createElement("p"); tnode = document.createTextNode("Blog:" + personaldata.getBlog()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); } } function myFunction(){ console.log("Write a new Line");//调试信息 alert("Hello World!"); } </script> </head> <body> <div id = "Personaldata"> <p> Personal Data </p> <button onclick="myFunction()">click here!</button> <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /> </div> </body> </html>
PersonalData.html
<html> <head> <script type="text/javascript"> function onload(){ var personaldata = window.PersonalData.getPersonalData(); if(personaldata) { var Personaldata = document.getElementById("Personaldata"); pnode = document.createElement("p"); tnode = document.createTextNode("ID:" + personaldata.getID()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); pnode = document.createElement("p"); tnode = document.createTextNode("Name:" + personaldata.getName()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); pnode = document.createElement("p"); tnode = document.createTextNode("Age:" + personaldata.getAge()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); pnode = document.createElement("p"); tnode = document.createTextNode("Blog:" + personaldata.getBlog()); pnode.appendChild(tnode); Personaldata.appendChild(pnode); } } </script> </head> <body onload="javascript:onload()"> <div id = "Personaldata"> <p> Personal Data </p> </div> </body> </html>
或者
<html> <head> <script type="text/javascript" src="test2.js"> </script> </head> <body onload="javascript:myFunction()"> <div id = "Personaldata"> <p> Personal Data </p> <button onclick="myFunction()">click here!</button> </div> </body> </html>
test2.js
function myFunction(){
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById("Personaldata");
pnode = document.createElement("p");
tnode = document.createTextNode("ID:" + personaldata.getID());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement("p");
tnode = document.createTextNode("Name:" + personaldata.getName());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement("p");
tnode = document.createTextNode("Age:" + personaldata.getAge());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement("p");
tnode = document.createTextNode("Blog:" + personaldata.getBlog());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
}
}
或者
<html> <head> <script type="text/javascript" src="test2.js"> </script> </head> <body><!-- onload="javascript:myFunction()"--> <div id = "Personaldata"> <p> Personal Data </p> <button onclick="myFunction()">click here!</button> </div> </body> </html>
test2.js
window.onload= function(){
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById("Personaldata");
pnode = document.createElement("p");
tnode = document.createTextNode("ID:" + personaldata.getID());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement("p");
tnode = document.createTextNode("Name:" + personaldata.getName());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement("p");
tnode = document.createTextNode("Age:" + personaldata.getAge());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement("p");
tnode = document.createTextNode("Blog:" + personaldata.getBlog());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
}
}
<script type="text/javascript" src="test2.js"/>android2.2兼容，但是android4.1.2不兼容。下面的才兼容android4.1.2
<script type="text/javascript" src="test2.js"></script>
4.2及以上版本必须在js调用的java方法加上@JavascriptInterface，4.1及以下版本不用加上注释。