js與native的交互
阿新 • • 發佈：2017-06-02
javascrip 復制代碼 bsp htm listen head js調用 span line 
WebView與Javascript交互(Android)：
WebView與Javascript交互是雙向的數據傳遞，1.H5網頁的JS函數調用Native函數 2.Native函數調用JS函數，具體實現以下面例子為主：
1.）mainfest.xml中加入網絡權限
<uses-permission android:name="android.permission.INTERNET"/>
2.）WebView開啟支持JavaScript
mWebView.getSettings().setJavaScriptEnabled(true);
3.）簡單的H5網頁實現，主要實現actionFromNative()、actionFromNativeWithParam(String str)，放在assets文件下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function actionFromNative(){
document.getElementById("log_msg").innerHTML +=
"<br\>Native調用了js函數";
}
function actionFromNativeWithParam(arg){
document.getElementById("log_msg").innerHTML +=
("<br\>Native調用了js函數並傳遞參數："+arg);
}
</script>
</head>
<body>
<p>WebView與Javascript交互</p>
<div>
<button onClick="window.wx.actionFromJs()">點擊調用Native代碼</button>
</div>
<br/>
<div>
<button onClick="window.wx.actionFromJsWithParam(‘come from Js‘)">點擊調用Native代碼並傳遞參數</button>
</div>
<br/>
<div id="log_msg">調用打印信息</div>
</body>
</html>
4.）Native實現與JS交互函數：actionFromJs()、actionFromJsWithParam()
public class MainActivity extends Activity {
private WebView mWebView;
private TextView logTextView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
// 啟用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
// 從assets目錄下面的加載html
mWebView.loadUrl("file:///android_asset/wx.html");
mWebView.addJavascriptInterface(this, "wx");
logTextView = (TextView) findViewById(R.id.text);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
// 無參數調用
mWebView.loadUrl("javascript:actionFromNative()");
// 傳遞參數調用
mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "‘come from Native‘" + ")");
}
});
}
@android.webkit.JavascriptInterface
public void actionFromJs() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js調用了Native函數", Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs調用了Native函數";
logTextView.setText(text);
}
});
}
@android.webkit.JavascriptInterface
public void actionFromJsWithParam(final String str) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js調用了Native函數傳遞參數：" + str, Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs調用了Native函數傳遞參數：" + str;
logTextView.setText(text);
}
});
}
}
mWebView.addJavascriptInterface(this, "wx");相當於添加一個js回調接口，然後給這個起一個別名，我這裏起的名字wx（微信哈哈）[email protected]terface漏洞的，在4.2以後才有的。
5.）布局文件實現
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""/>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Native調用js函數"/>
</LinearLayout>
6.）代碼簡單解說
（1.）js（HTML）訪問Android（Java）端代碼是通過jsObj對象實現的，調用jsObj對象中的函數，如： window.jsObj.actionFromJs()，這裏的jsObj就是Native中添加接口的別名
（2.）Android（Java）訪問js（HTML）端代碼是通過loadUrl函數實現的，訪問格式如：mWebView.loadUrl("javascript:actionFromNative()");
demo運行截圖：
Objective-C與JavaScript交互(ios)
http://www.cocoachina.com/ios/20160127/15105.html
js與native的交互