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 ...

随机推荐

【LeetCode】 617. 合并二叉树
题目给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否 ...
J02-Java IO流总结二《概述》
1 流的概念流是一个信息的通道,通过通道可以访问通道连接的文件对象. 2 流的分类根据流中数据的流向,可分为输入流和输出流输入流:从其他的地方流入到程序内存中的,比如InputStream. ...
Maven与Hudson集成
Hudson是一款优秀的持续集成产品,本文阐述Maven于Hudson的集成 Hudson的下载和安装 Hudson有两种安装模式,1:自运行(Hudson内建netty容器),2:放到如tomc ...
Visual Studio 中的 Office 和 SharePoint 开发
MSDN Library 开发工具和语言 Visual Studio 中的 Office 和 SharePoint 开发 https://msdn.microsoft.com/zh-cn/libra ...
seek（）方法的使用
seek()方法用于移动文件读取指针到指定位置. file.seek()方法标准格式是:file.seek(offset,whence) offset:开始的偏移量,也就是代表需要移动偏移的字节数 w ...
【软件工程实践】第二次作业：分布式版本控制系统Git的安装与使用
1.下载安装配置用户名和邮箱. 2. 创建工作目录并通过git init命令把这个目录变成Git可以管理的仓库. 3. 在工作目录下准备文本文件,建议下载Notepad++代替记事本. 4. 组合用g ...
笛卡尔积算法的sku
1.笛卡尔积在形式上比较容易理解,但作为按钮操作DOM的时候,我的思路大体还可以,有些偏差.看到这种矩行方阵,首先联想到二维数组,事实上这种方法完全可以实现,但是在性能和编码速度上都有弊端. 2.以下 ...
Java跨语言调用，使用JNA访问Java外部接口
1. JNA简单介绍先说JNI(Java Native Interface)吧,有过不同语言间通信经历的一般都知道,它允许Java代码和其他语言(尤其C/C++)写的代码进行交互,只要遵守调用约定即 ...
Impala查询详解
Impala的定位是一种新型的MPP查询引擎,但是它又不是典型的MPP类型的SQL引擎,提到MPP数据库首先想到的可能是GreenPlum,它的每一个节点完全独立,节点直接不共享数据,节点之间的信息传 ...
剑指offer65:矩阵中的路径
题目描述: 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩阵 ...

js与native的交互