js与native的交互

时间：2022-09-23 11:05:39

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

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交互 &sol; JS 和 native 相互调用

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

  4. iOS中JS 与OC的交互&lpar;JavaScriptCore&period;framework&rpar;

    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开发&colon;JavaScriptCore&period;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. 聊一聊PV和并发

    最近和几个朋友,聊到并发和服务器的压力问题.很多朋友,不知道该怎么去计算并发?部署多少台服务器才合适? 所以,今天就来聊一聊PV和并发,还有计算web服务器的数量 的等方法.这些都是自己的想法加上一些 ...

  2. 修改mysql默认字符编码出现的Job failed to start解决方法

    5.5以后的版本对字符编码方式修改的办法,原来在[mysqld]下的修改已经发生了变化,正确方式如下: [mysqld]下添加的应该为: character-set-server=utf8 colla ...

  3. 方法的可变长参数 传入参数个数不确定可用（Type &period;&period;&period; values）

    /** * 可变长的参数. * 有时候,我们传入到方法的参数的个数是不固定的,为了解决这个问题,我们一般采用下面的方法: * 1． 重载,多重载几个方法,尽可能的满足参数的个数.显然这不是什么好办法. ...

  4. poj 水题系列

    题目:http://poj.org/problem?id=3006 筛选法求素数 #include <iostream> #include<cstdio> #include&l ...

  5. Android实现多次闪退清除数据

    背景 很多时候由于后台返回的数据异常,可能会导致App闪退.而如果这些异常数据被App本地缓存下来,那么即使杀掉进程重新进入还是会发生闪退.唯一的解决方法就是清除App数据,但是用户可能没有这个意识或 ...

  6. 用ToggleButton和ImageView实现不同状态下显示的切换

    靠,写的时候第一次因为把implements OnCheckedChangeListener这里实现的接口写错了,搞了很久, 后来发现又少了这两句错了 btn = (ToggleButton) fin ...

  7. linux防火墙基本操作

    1.查看防火墙运行状态 # firewall-cmd --state 或者 # systemctl status firewalld.service .关闭防火墙 # systemctl stop f ...

  8. Learning to Rank&lpar;转&rpar;

    https://blog.csdn.net/kunlong0909/article/details/16805889 Table of Contents 1 前言 2 LTR流程 3 训练数据的获取4 ...

  9. 在Ubuntu18&period;04下配置HBase

    HBase在HDFS基础上提供了高可靠, 列存储, 可扩展的数据库系统. HBase仅能通过主键(row key)和主键的range来检索数据, 主要用来存储非结构化和半结构化的松散数据. 与Hado ...

  10. Ansible Ad-Hoc命令

    -a:传入模块的参数,不同的模块要传入的参数不同 -B SECOND:当任务放到后台执行异步任务,设置程序运行的超时时间,传入的是一个数值,单位秒 -C:测试该任务能否正常运行,不对被管理主机做出任何 ...

相关文章