精选文章 js与native的交互

js与native的交互

作者:辛苦的码农20200609 时间: 2021-02-05 09:43:11
辛苦的码农20200609 2021-02-05 09:43:11
【摘要】WebView与Javascript交互(Android): 
   WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具体实现以下面例子为主: 
1.)mainfest.xml中加入网络权限 
 
  
 
2.)WebView开启支持JavaScript 
 
   mWebView.getSettin...

WebView与Javascript交互(Android):

   WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具体实现以下面例子为主:

1.)mainfest.xml中加入网络权限

2.)WebView开启支持JavaScript

  mWebView.getSettings().setJavaScriptEnabled(true);  

3.)简单的H5网页实现,主要实现actionFromNative()、actionFromNativeWithParam(String str),放在assets文件下

js与native的交互1
  <script> function actionFromNative(){ document.getElementById("log_msg").innerHTML += "Native调用了js函数"; } function actionFromNativeWithParam(arg){ document.getElementById("log_msg").innerHTML += ("Native调用了js函数并传递参数:"+arg); } </script>


WebView与Javascript交互



调用打印信息
js与native的交互2

4.)Native实现与JS交互函数:actionFromJs()、actionFromJsWithParam()

js与native的交互3
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的交互4

mWebView.addJavascriptInterface(this, "wx");相当于添加一个js回调接口,然后给这个起一个别名,我这里起的名字wx(微信哈哈)。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的,在4.2以后才有的。

5.)布局文件实现

js与native的交互5

   

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的交互7

 

Objective-C与JavaScript交互(ios)

http://www.cocoachina.com/ios/20160127/15105.html

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:leetcode动态规划算法

下一篇:1095:数1的个数

您可能感兴趣

  • js判断数据类型的几种方法

    我们在写封装的插件或者函数时,常常用到JS的数据类型判断,典型的案例就是深度拷贝函数用到数据类型判断,这个知识点在面试的时候也是经常考到的一个问题。今天在这里总结一下我个人遇到的可以判断数据类型的几种方式。如...

  • Js apply()使用详解 摘自(帅气的林老师) 做笔记用

    1.apply和call的区别  2.什么情况下用apply,什么情况下用call     3.apply的其他巧妙用法(一般在什么情况下可以使用apply)    apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.     Function.apply(obj,args)方法能接收两个参数  obj:这个对象将代替Function...

  • js 覆盖数组成员的方法 copyWithin() fill() - Kaiqisan

    js 覆盖数组成员的方法 copyWithin() fill() ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天来讲讲批量替换数组内容的知识。为什么把这俩方法放在一起呢?还不是因为这...

  • Airbnb 宣布放弃使用 React Native,Vue超越了React?

    Airbnb 宣布放弃使用 React Native,Vue超越了React?   前端每周清单专注大前端领域内容,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。   新闻热点 国内国外,前端最新动态 Vue.j...

  • 运行js或html代码

    有时作为展示,一些页面源码让其他人看到,可以直接写到页面上,但想看看效果的时候,可以直接运行这段代码,这样就可通过以下方法: function runCode(code){    var newWindow = window.open();     newWindow.opener = null; //对创建该窗口(newWind...

  • Shell脚本交互之:自动输入密码

    平时在控制台输入指令如:sudo、ssh、ftp或者修改admin权限的文件时候都会要求输入password,但是在she'll脚本运行过程中该如何交互实现自动输入密码呢? 下面总结三种实现方法。 一、重定向:用重定向方法实现交互的前提是指令需要有参数来指定密码输入方式,如ftp就有-i参数来指定使用标准输入来输入密码         shel...

  • (1)asp.net中一般的get和post请求以及前后端的交互

    考虑到有很多人可能不知道asp.net中前端和后端是进行交互的,所以这里主要讲了数据交互。然后为了给后面的ajax作铺垫,这里还讲了get请求和post请求。 注:我使用的是visual studio,先建立一个as...

  • 瀑布流;JS; Waterfall.js

    瀑布流;JS; Waterfall.js DOM <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" co...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
js与native的交互介绍:华为云为您免费提供js与native的交互在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多js与native的交互的相关内容。| 移动地址: js与native的交互 | 写博客