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

随机推荐

[bug]微信小程序使用 <scroll-view> 和 box-shadow 引起页面抖动
背景为了实现点点点动态loading效果,并且方便使用(只需要给一个空元素加一个.loading),有如下代码: .loader { background-color: #fff; font-siz ...
【bug】安卓浏览器键盘输入改变弹出层的定位
bug描述在安卓浏览器中,有一个在页面底部的弹出层表单,样式如下: .popup { position: absolute; bottom: 0; } 当在这个弹出层输入内容,键盘自动弹出,弹出层的 ...
【JS深入学习】——函数创建和重载
今天做一个关注/取消的功能,由于需要向后台发送请求,想通过控制用户点击发送的频次减少不必要的请求,即在一定时间内,用户点击多次但只发送一次数据,自然而然想到了使用[函数节流]. function th ...
【xsy1201】随机游走高斯消元
题目大意:你有一个$n*m$的网格(有边界),你从$(1,1)$开始随机游走,求走到$(n,m)$的期望步数. 数据范围:$n≤10$,$m≤1000$. 我们令 $f[i][j]$表示从$(1,1) ...
暴力攻击 PHP 脚本初探
考虑下面的HTML表单: CODE: <form action="http://example.org/login.php" method="POST"& ...
Java的Signature签名转换成.Net
Java: Signature sig = Signature.getInstance("SHA1withRSA"); sig.initSign(rsaPrivateKey); s ...
Javac语法糖之内部类
在Javac中解语法糖主要是Lower类来完成,调用这个类的入口函数translateTopLevelClass即可.这个方法只是JavacCompiler类的desugar方法中进行了调用. 首先来 ...
解决chrome，下载在文件夹中显示，调用错误的关联程序
https://blog.csdn.net/qq_32337527/article/details/81778732?utm_source=blogxgwz0
kibana加访问控制时报错--Kibana did not load properly.Check the server output for more information.
错误在使用kibana的时候,我们需要对可以进行日志访问进行控制,x-pack插件是最好的选择,但是kibana的x-pack插件是收费的,我们本着节约资源的理念(公司的钱也是钱啊,哈哈),我决定使 ...
C语言中的条件编译
通常情况,我们想让程序选择性地执行,多会使用分支语句,比如if-else 或者switch-case 等.但有些时候,可能在程序的运行过程中,某个分支根本不会执行. 比如我们要写一个跨平台项目,要求项 ...

js与native的交互