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（微信哈哈）。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的，在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的交互的更多相关文章

Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...
js与native交互
js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...
iOS JS 和 OC交互 / JS 和 native 相互调用
现在app 上越来越多需求是通过UIWebView 来展示html 或者 html5的内容, js 和 native OC代码交互就非常常见了. js 调用 native OC代码第一种机制 ( ...
iOS中JS 与OC的交互(JavaScriptCore.framework)
iOS中实现js与oc的交互,目前网上也有不少流行的开源解决方案: 如:react native 当然一些轻量级的任务使用系统提供的UIWebView 以及JavaScriptCore.framewo ...
webview的javascript与Native code交互
http://my.oschina.net/u/1376187/blog/172296 项目中使用了webview显示网页,其中需要网页和native方法有交互,搜索到一篇文章,转发分享一下: === ...
cordova与ios native code交互的原理
非常早曾经写了一篇博客,总结cordova插件怎么调用到原生代码:cordova调用过程,只是写得太水.基本没有提到原理.近期加深了一点理解,又一次补充说明一下 js调用native 以下是我们产品中 ...
iOS开发:JavaScriptCore.framework的简单使用--JS与OC的交互篇
iOS7之后苹果为众猿推出了JavaScriptCore.framework这个框架,这个框架为大家在与JS交互上提供了很大帮助,可以在html界面上调用OC方法并传参,也可以在OC上调用JS方法并传 ...
Js与flash交互：在html页面中用js与MyReport插件交互
Html页面与flash的加载如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...
js与objective-c的交互-备
在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要从现在的网页跳到另外一个网页的时候,就会去修改 window.location.href 的位置:在我们的 Ob ...

随机推荐

FlexMonkey实战
文章来源:http://www.cnblogs.com/raol/p/flexmonkey.html 我的有道云笔记:http://note.youdao.com/share/?id=22b79669 ...
redis升级注意事项
新版本redis读取旧版本redis的rdb , aof 使用新版本redis备份rdb , aof操作系统级别备份 rdb , aof重启redis测试新版本redisrdb , aof 能否读 ...
POJ 2242
#include <iostream> #include <cmath> #include <iomanip> using namespace std; #defi ...
django遇到的坑
博主新手,今天第一次用django,遇到了很多坑和大家分享一下啊,win8.1+python3.6! 第一步安装django,配置好环境变量 .配置好环境变量.配置好环境变量(注意是配置好,不是配置了 ...
【数组】Remove Duplicates from Sorted Array II
题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...
svn 服务器搭建 ,采用http的方式加密用户。
1.1安装svn 1.环境 centos6.5 本地ip:192.168.2.154 2.安装 yum install subversion 查看版本 svnserve --version 3.创建版 ...
lua的克隆函数，table的深度拷贝
--深度拷贝Table function DeepCopy(obj) local InTable = {}; local function Func(obj) if type(obj) ~= &quo ...
Go语言学习笔记七：函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
ZooKeeper：架构和算法
ZooKeeper主要用来解决分布式应用场景中存在的一些问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置管理等. 它支持Standalone模式和分布式模式,在分布式模式下,能够为分布式 ...
Install Tomcat 6 on CentOS or RHEL --转载
source:http://www.davidghedini.com/pg/entry/install_tomcat_6_on_centos This post will cover installa ...

js与native的交互