最近做Android項目中遇到要在webview中做與js交互相關的東東,涉及到js中調用android本地的方法,於是查了資料整理了一下android和js互相調用的過程。如下demo,demo的主要實現過程如下:通過加載本地的html文件(裏面有js腳本),實現android本地方法和js中的交互。
第一步:
mainfest.xml中加入網絡權限
-
<uses-permission android:name="android.permission.INTERNET" />
第二步:
加載本地寫好的html文件(定義好js中提供給android調用的方法 funFromjs(),和android提供給js調用的對象接口fun1FromAndroid(String name)),放在 assets目錄下。
-
<body>
-
<a>js中調用本地方法</a>
-
<script>
-
-
function funFromjs(){
-
document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";
-
}
-
var aTag = document.getElementsByTagName('a')[0];
-
aTag.addEventListener('click', function(){
-
//調用android本地方法
-
myObj.fun1FromAndroid("調用android本地方法fun1FromAndroid(String name)!!");
-
return false;
-
}, false);
-
</script>
-
<p></p>
-
<div id="helloweb">
-
-
</div>
-
</body>
第三步:
實現android工程與js交互的相關代碼
android主題代碼:
-
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
-
@Override
-
protected void onCreate(Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
setContentView(R.layout.activity_main);
-
-
initViews();
-
-
-
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
-
-
mWebView.getSettings().setJavaScriptEnabled(true);
-
-
mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
-
-
mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");
-
-
mWebView.loadUrl("file:///android_asset/test.html");
-
-
-
mBtn1.setOnClickListener(new View.OnClickListener() {
-
-
@Override
-
public void onClick(View v) {
-
mWebView.loadUrl("javascript:funFromjs()");
-
Toast.makeText(mContext, "調用javascript:funFromjs()", Toast.LENGTH_LONG).show();
-
}
-
});
-
-
}
js調用的android對象方法定義
-
public class JavaScriptObject {
-
Context mContxt;
-
@JavascriptInterface
-
public JavaScriptObject(Context mContxt) {
-
this.mContxt = mContxt;
-
}
-
-
public void fun1FromAndroid(String name) {
-
Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
-
}
-
-
public void fun2(String name) {
-
Toast.makeText(mContxt, "調用fun2:" + name, Toast.LENGTH_SHORT).show();
-
}
-
}
效果圖:
。。。。
ps:據網友反應,在Android4.4以上不支持js的一些方法了,上面的思想大概是這樣,要實用的大家可以參考這個開源項目:
https://github.com/lzyzsd/JsBridge
點擊去下載整個demo工程