H5 与 App、网页之间的通信

前言

本文整理工作中 H5 嵌入 Android、iOS 与 PC 网页后,如何与各端通信。(提供 H5 端的代码)

环境判断

  const ua = navigator.userAgent.toLowerCase()const isAndroid = /android/i.test(ua)const isIos = /iphone|ipod|ios/i.test(ua)const isIpad = /ipad/i.test(ua)const isMobile = isAndroid || isIos || isIpadconst isWx = /micromessenger/i.test(ua) // 微信const isWxWork = /wxwork/.test(ua) // 企业微信const isQq = /QQ\/([\d\.]+)/i.test(ua) // QQconst isQz = ua.indexOf('qzone/') > -1 // QQ空间const isByteDance = /bytedancewebview/i.test(ua) // 字节跳动const isTickTok = /ttwebview/i.test(ua) // 抖音

Android

if (isAndroid) {// 通知 app 打开弹窗, 并传参。方法在 app 中定义window.androidFunc.openDialog(JSON.stringify({ id: 1 })) 
}
// 监听app主动触发刷新事件
window.appReload = (params) => {}

iOS/iPad

if (isIos) {// 通知 app 打开弹窗, 并传参。方法在 app 中定义 window.webkit.messageHandlers.openDialog.postMessage({ id: 1 })
}
// 监听app主动触发刷新事件
window.appReload = (params) => {}

PC

这里讨论网页通过 iframe 方式嵌入 H5 的方式

// 网页嵌套 H5
<iframe ref="detIframe" :src="url" frameborder="0" style="width: 100%; height: 100%"></iframe>// H5发送消息
// 这里可以指定具体可接收消息的窗口
window.parent.postMessage({ open: true }, url)
// 也可不指定
window.parent.postMessage({ open: true }, '*')// PC接收消息
window.addEventListener("message", receiveMessage, false)
function receiveMessage(event) {  // 检查消息的来源是否是我们期望的  if (event.origin !== "http://example.com") return// 处理接收到的数据  console.log("Received message:", event.data);  
}// PC 发送消息
this.$refs.detIframe.contentWindow.postMessage({data: data,},url
)

H5 与 App 之间的通信方式

以下内容来自文言一心

1. URL Scheme

URL Scheme是一种在移动应用中定义自定义URL协议的方式,通过它可以实现App与H5之间的跳转和通信。H5页面可以通过链接到特定的URL Scheme来触发App执行某些操作,反之亦然。

举个例子:

<!-- 打开微信 -->
<a href="weixin://">打开微信</a><!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a><!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a><!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

2. Deep Linking

Deep Linking是一种允许用户直接打开App中特定页面或功能的链接技术。它通常与URL Scheme结合使用,使得H5页面可以直接跳转到App的某个深层页面。

3. Universal Links(iOS)和App Links(Android)

Universal Links是苹果推出的一种技术,允许用户在Safari浏览器中直接打开App的特定页面,而无需先跳转到App的首页。类似地,Android平台有App Links,也实现了类似的功能。

4. WebView与JavaScript桥接

如果App内嵌了一个WebView来展示H5页面,那么可以通过WebView的JavaScript接口与原生代码进行通信。通常,这涉及到在原生代码中注入JavaScript代码,或者通过WebView的特定方法来调用原生方法。

5. 第三方库和框架

有一些第三方库和框架提供了更便捷的方式来实现App与H5之间的通信,比如React Native的WebView组件就提供了与H5页面通信的功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759231.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

笔试题——得物春招实习

开幕式排练 题目描述 导演在组织进行大运会开幕式的排练&#xff0c;其中一个环节是需要参演人员围成一个环形。演出人员站成了一圈&#xff0c;出于美观度的考虑&#xff0c;导演不希望某一个演员身边的其他人比他低太多或者高太多。 现在给出n个参演人员的身高&#xff0c;问…

使用Pygame做一个乒乓球游戏(2)使用精灵重构

本节没有添加新的功能&#xff0c;而是将前面的功能使用精灵类(pygame.sprite.Sprite) 重构。 顺便我们使用图片美化了一下程序。 看到之前的代码&#xff0c;你会发现代码有点混乱&#xff0c;很多地方使用了全局变量(global)。 本节我们将使用类进行重构。 Block(Sprite)…

NCV7428D15R2G中文资料PDF数据手册参数引脚图图片价格概述参数芯片特性原理

产品概述&#xff1a; NCV7428 是一款系统基础芯片 (SBC)&#xff0c;集成了汽车电子控制单元 (ECU) 中常见的功能。NCV7428 为应用微控制器和其他负载提供低电压电源并对其进行监控&#xff0c;包括了一个 LIN 收发器。 产品特性&#xff1a; 控制逻辑3.3 V或5 V VOUT电源&…

每天一个数据分析题(二百二十)

在集成学习的GBDT算法中&#xff0c;每次训练新的决策树的目的是( )&#xff1f; A. 预测原始数据的标签 B. 预测上一个模型的残差 C. 降低模型的偏差 D. 降低模型的方差 题目来源于CDA模拟题库 点击此处获取答案

python练习3

用户登录注册案例 while True: print("\t\t\t英雄商城登录界面\n") print("~*"*38) print("\t\t\t1.用户登录\n") print("\t\t\t2.用户注册\n") print("\t\t\t3.退出系统\n") print("~*"*38) choice input("…

Spark-Scala语言实战(4)

在之前的文章中&#xff0c;我们学习了如何在scala中定义无参&#xff0c;带参以及匿名函数。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言…

四、HarmonyOS应用开发-ArkTS开发语言介绍

目录 1、TypeScript快速入门 1.1、编程语言介绍 1.2、基础类型 1.3、条件语句 1.4、函数 1.5、类 1.6、模块 1.7、迭代器 2、ArkTs 基础&#xff08;浅析ArkTS的起源和演进&#xff09; 2.1、引言 2.2、JS 2.3、TS 2.4、ArkTS 2.5、下一步演进 3、ArkTs 开发实践…

Verilog基础:always结构和initial结构

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 always和initial是Verilog中的核心&#xff0c;它们被称为结构(construct)&#xff0c;用于组织语句的执行方式。下面将分别对这两者进行阐述。 always结构 图1是…

弹框el-dialog title展示不下,鼠标hover显示tip

el-dialog title展示不下&#xff0c;鼠标hover显示tip <el-dialog:visible.sync"shows":close-on-click-modal"false"v-dialogDragwidth"520px"><template #title><div class"custom-title"><el-tooltipplaceme…

【文件操作和IO】

文件操作和IO 1.文件2. 硬盘上文件的目录结构3. 文件路径4. 文件重要分类&#xff1a;5. Java中操作文件5.1 Java对于文件操作的API5.2 Java中使用File类来进行文件操作5.3 File类属性5.4 构造方法5.5 方法&#xff1a; 6. 文件内容的读写 -- 文件流&#xff08;数据流&#xf…

Apache Superset

前言 最近在准备一个小的项目&#xff0c;需要对 Hive 的数据进行展示&#xff0c;所以想到了把 Hive 的数据导出到 MySQL 然后用 Superset 进行展示。 Superset 1.1 Superset概述 Apache Superset是一个现代的数据探索和可视化平台。它功能强大且十分易用&#xff0c;可对接…

kubesphere all in one部署Jenkins提示1 Insufficient cpu

原因 devops 至少一个cpu&#xff08;1000m&#xff09;&#xff0c;但是其他资源已经占用了很多cpu CPU 资源以 CPU 单位度量。Kubernetes 中的一个 CPU 等同于&#xff1a; 1 个 AWS vCPU 1 个 GCP核心 1 个 Azure vCore 裸机上具有超线程能力的英特尔处理器上的 1 个超线程…

Qt_Note10_QML_ComponentLoader

在 QML 中&#xff0c;Component 和 Loader 是两个重要的元素&#xff0c;用于动态创建和加载其他 QML 组件。 Component&#xff08;组件&#xff09;&#xff1a; Component 是一个可重复使用的 QML 定义&#xff0c;类似于一个模板或类的概念。它可以定义一个独立的 QML组件…

spaCy NLP库的模型的下载、安装和使用说明书

文章目录 1 前言2 安装3 模型命名规范3.1 模型版本控制3.2 支持对旧版本的兼容 4 下载模型5 加载和使用模型6 手动下载和安装7 spaCy v1.x模型的命名规范8 问题和错误报告 1 前言 explosion网址&#xff1a;https://explosion.ai/ spaCy下载网址&#xff1a;https://explosion…

RISC-V架构的三种特权模式如何切换

1、RISC-V的三种特权模式 特权模式功能描述机器模式&#xff08;M-mode&#xff09;具有最高特权等级&#xff0c;具有访问所有资源的权限&#xff0c;通常运行固件和内核用户模式&#xff08;U-mode&#xff09;权限要比M模式低&#xff0c;通常是用来运行操作系统内核管理员…

MyBatis3源码深度解析(十七)MyBatis缓存(一)一级缓存和二级缓存的实现原理

文章目录 前言第六章 MyBatis缓存6.1 MyBatis缓存实现类6.2 MyBatis一级缓存实现原理6.2.1 一级缓存在查询时的使用6.2.2 一级缓存在更新时的清空 6.3 MyBatis二级缓存的实现原理6.3.1 实现的二级缓存的Executor类型6.3.2 二级缓存在查询时使用6.3.3 二级缓存在更新时清空 前言…

Python每日三道经典面试题(十七)

1.为什么使用* args&#xff0c;** kwargs&#xff1f; 在Python中&#xff0c;*args和**kwargs是用于函数定义时&#xff0c;处理可变数量的参数。它们允许你创建更灵活和通用的函数&#xff0c;能够接受任意数量的位置参数和关键字参数。 使用*args *args用于收集那些没有…

2024年第六届区块链与物联网国际会议(BIOTC 2024)即将召开!

2024年第六届区块链与物联网国际会议&#xff08;简称&#xff1a;BIOTC 2024&#xff09;将于2024 年 7 月 19 日至 21 日在日本福冈召开&#xff0c;旨在为来自行业、学术界和政府的研究人员、从业者和专业人士提供一个论坛&#xff0c;就研发区块链和物联网的专业实践进行交…

简介:使用TensorFlow实现python简版神经网络模型

如果你想进一步深入AI编程的魔法世界&#xff0c;那么TensorFlow和PyTorch这两个深度学习框架将是你的不二之选。它们可以帮助你构建更加复杂的神经网络模型&#xff0c;实现图像识别、语音识别等高级功能。 模型原理&#xff1a;神经网络是一种模拟人脑神经元结构的计算模型&a…

python 基于 websocket 的简单将视频推流到网页

本来有一台设备是要搞成无线的形式的&#xff0c;设备的摄像头的数据可以在一台局域网连接的平板上查看&#xff0c;因为试着使用 RTMP 推流&#xff0c;感觉延时太大了&#xff0c;而 Webrtc 感觉有太麻烦了&#xff0c;所以一开始看到这篇文章使用 UDP 协议进行推流&#xff…