移动端H5与原生JavaScript是如何交互的？

2021-02-08    分类： 网站建设

随着移动端互联网的发展，越来越的APP运用到H5，可移动端H5与原生JavaScript是如何交互的呢？


JavaScript调用Native的方式，主要有两种：注入API和拦截URL SCHEME。

1、Android的处理方式

Android中，就是新建一个类，里面写提供给H5操作的方法，并规定别名。

在安卓4.2以上可以直接使用@JavascriptInterface注解来声明。

定义完这个方法后再调用mWebView.addJavascriptInterface()方法。

将方法注入在window中，H5调用时，根据“window. 别名.方法”来调用。


2、IOS的处理方式

IOS是利用WKWebView的新特性MessageHandler来实现JS调用原生方法的。

WKWebView初始化时，创建WKWebViewConfiguration对象，配置各个接口对应的MessageHandler，然后再接受js传递的参数调用接口。

H5中调用时，使用window.webkit.messageHandlers.接口名. postMessage(参数)。


拦截 URL SCHEME

拦截URL SCHEME的主要流程是：Web端通过某种方式（例如iframe.src）发送URL Scheme 请求，之后Native拦截到请求并根据URL SCHEME（包括所带的参数）进行相关操作。

在这个过程中，这种方式有一定的缺陷：

  • 使用iframe.src发送URL SCHEME会有URL长度的隐患，而且特殊字符需要编码解码。
  • 创建请求，需要一定的耗时，比注入API的方式调用同样的功能，耗时会较长。

分享标题：移动端H5与原生JavaScript是如何交互的？
标题路径：https://www.cdcxhl.com/news37/99837.html

成都网站建设公司_创新互联，为您提供移动网站建设、静态网站、网站制作、面包屑导航、虚拟主机、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都网页设计公司

网站建设知识

分类信息网