web组件发消息给H5页面时报错
2023-09-11 14:17:17 时间
问题描述
Web组件发消息给H5页面时,出现如下js错误:
02-14 09:22:56.329 E/jsLog (18834): [H5]Uncaught TypeError: system.onmessage is not a function
问题分析
当H5页面中定义的 system.onmessage 函数代码逻辑较多,有可能还依赖一些外部js(比如jquery)的引用。此时如果web组件在 onpagefinish 事件处理函数中触发了 this.$element('webElementId').postMessage({message:’xxx’}),则可能会由于H5页面的js没有完全加载,从而导致出现 system.onmessage is not a function 的错误。
处理过程
H5页面中 system.onmessage 函数定义要轻量,只接收快应用页面传递过来的数据即可,剩下的逻辑交给h5页面自己的生命周期函数处理,比如 onload 事件。
需要注意 onload 事件触发时,快应用的数据还没接收到,H5页面中要轮询监听数据,故请参考如下实现代码:
不推荐的实现代码如下:
建议与总结
理解快应用与H5消息发送机制,通过轮询的方式解决异步问题。
原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0201411120590030372?fid=18
原作者:Mayism
相关文章
- 微信小程序 - 打开跳转 H5 网页链接(小程序内打开网页)
- uni-app - H5 端获取当前页面的路由和参数(得到当前页面地址的路径 URL)
- uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,给微信分享卡片设置图标、标题、描述文字等(JS-SDK 通用解决方案放心用)
- uni-app - 日历选择器组件(支持日期 “范围选择“ 多选 / 支持单选日期 / 自定义默认选中时间 / 弹框式 / 支持农历 )完美兼容 H5 APP 小程序,最好用的教程完整源代码插件!
- uni-app - 文字上下循环滚动翻滚,类似中奖名单与公告栏信息公示等等,自定义组件封装,支持 DIY(适用于新闻动态、公告上下滚动列表、上下循环滚动,无限上下自动滚动列表)兼容小程序/H5/App
- 华为 H5 快游戏调用 createPurchaseIntent 支付接口拉起支付收银台后闪退
- 教你一招H5快应用快速回到首页
- h5 zuimeitianqi
- H5下拉刷新和上拉加载实现原理浅析
- 常见工作场景解决方案开源库推荐:文件上传库 - uppy、图片处理库 - tui.image-editor、在线文档预览解决方案 - kkFileView、纯前端在线表格/协同编辑解决方案 - Luckysheet、表单设计器 - form-generator / form-render、H5在线网页设计器 - gods-pen / luban-h5
- 从零开始制作H5人脸融合小游戏
- h5做直播的弹幕效果