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的交互的更多相关文章

  1. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

  2. js与native交互

    js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...

  3. iOS JS 和 OC交互 / JS 和 native 相互调用

    现在app 上越来越多需求是通过UIWebView 来展示html 或者 html5的内容, js 和 native OC代码交互 就非常常见了. js 调用 native  OC代码 第一种机制 ( ...

  4. iOS中JS 与OC的交互(JavaScriptCore.framework)

    iOS中实现js与oc的交互,目前网上也有不少流行的开源解决方案: 如:react native 当然一些轻量级的任务使用系统提供的UIWebView 以及JavaScriptCore.framewo ...

  5. webview的javascript与Native code交互

    http://my.oschina.net/u/1376187/blog/172296 项目中使用了webview显示网页,其中需要网页和native方法有交互,搜索到一篇文章,转发分享一下: === ...

  6. cordova与ios native code交互的原理

    非常早曾经写了一篇博客,总结cordova插件怎么调用到原生代码:cordova调用过程,只是写得太水.基本没有提到原理.近期加深了一点理解,又一次补充说明一下 js调用native 以下是我们产品中 ...

  7. iOS开发:JavaScriptCore.framework的简单使用--JS与OC的交互篇

    iOS7之后苹果为众猿推出了JavaScriptCore.framework这个框架,这个框架为大家在与JS交互上提供了很大帮助,可以在html界面上调用OC方法并传参,也可以在OC上调用JS方法并传 ...

  8. Js与flash交互：在html页面中用js与MyReport插件交互

    Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...

  9. js与objective-c的交互-备

    在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要从现在的网页跳到另外一个网页的时候,就会去修改 window.location.href 的位置:在我们的 Ob ...

随机推荐

  1. 【NOIP2013】转圈游戏 快速幂

    题目大意:给你四个整数$n,m,k,x$,求$(x+m\times 10^k)%n$. 直接一个快速幂就好了,注意开$long\ long$. #include<bits/stdc++.h> ...

  2. Scala中使用implict 扩展现有类的方法

    Scala中implict的一种用法就是扩展现有类的方法,有点类似于.Net中的扩展方法(MS对扩展方法的介绍:扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改 ...

  3. ASP.NET 下使用特定身份完成windows服务的功能操作

    今天部署项目的发现一个问题: 在本地Win7系统下利用Web页面完成Windows服务的功能操作(启动.停止.安装.卸载)都是正常的,而部署到Server2008系统下,再使用Web页面完成windo ...

  4. 在Vue的webpack中结合runder函数

    在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...

  5. 【Java并发编程】：内存可见性

    加锁(synchronized同步)的功能不仅仅局限于互斥行为,同时还存在另外一个重要的方面:内存可见性.我们不仅希望防止某个线程正在使用对象状态而另一个线程在同时修改该状态,而且还希望确保当一个线程 ...

  6. python开发环境安装配置

    需要安装的软件: Python2.7.14和Python3.6.4   要在电脑上同时安装两个版本 开发工具:PyCharm 是一个jetbrains的python开发工具  idea系列之一 Pyt ...

  7. 数据库--oracle安装配置(本地安装的步骤及各种问题解决方案)

    oracle版本:Oracle 11g 本地电脑配置:安装内存8G 64为操作系统win8.1 下载Oracle 11g压缩包: 1 网址http://www.oracle.com/technetwo ...

  8. vim shortcut

    1.vim ~/.vimrc 进入配置文件 如果不知道vimrc文件在哪,可使用 :scriptnames 来查看 set nu #行号 set tabstop=4 #一个tab为4个空格长度 set ...

  9. Oracle数据库中的分页--rownum

    1. 介绍 当我们在做查询时,经常会遇到如查询限定行数或分页查询的需求,MySQL中可以使用LIMIT子句完成,在MSSQL中可以使用TOP子句完成,那么在Oracle中,我们如何实现呢? Oracl ...

  10. Beta阶段——Scrum 冲刺博客第五天

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 完成部分answer界面的制作,将题目与用户输入的答案.正确答案依次列出来 ...