js与native的交互

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文件下

js与native的交互
<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>
js与native的交互

4.)Native实现与JS交互函数:actionFromJs()、actionFromJsWithParam()

js与native的交互
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);
}
}); }
}
js与native的交互

mWebView.addJavascriptInterface(this, "wx");相当于添加一个js回调接口,然后给这个起一个别名,我这里起的名字wx(微信哈哈)。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的,在4.2以后才有的。

5.)布局文件实现

js与native的交互
<?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>
js与native的交互

6.)代码简单解说

(1.)js(HTML)访问Android(Java)端代码是通过jsObj对象实现的,调用jsObj对象中的函数,如: window.jsObj.actionFromJs(),这里的jsObj就是Native中添加接口的别名

(2.)Android(Java)访问js(HTML)端代码是通过loadUrl函数实现的,访问格式如:mWebView.loadUrl("javascript:actionFromNative()");

demo运行截图:

js与native的交互

Objective-C与JavaScript交互(ios)

http://www.cocoachina.com/ios/20160127/15105.html

上一篇:CEF3开发者系列之JS与C++交互之一


下一篇:(45). Spring Boot MyBatis连接Mysql数据库【从零开始学Spring Boot】