9***@qq.com
9***@qq.com
  • 发布:2025-03-30 13:24
  • 更新:2025-03-30 14:34
  • 阅读:68

webview 嵌套h5时,动态创建的webview怎么接收h5传过来的消息

分类:5+ SDK
复制代码            async createWebview() {  
                try {  
                    // 1. 获取系统信息  
                    const systemInfo = await uni.getSystemInfoSync();  
                    // 2. 计算所有栏位高度(单位:px)  
                    const statusBarHeight = systemInfo.statusBarHeight || 0; // 状态栏  

                    const tabBarHeight = uni.upx2px(80); // 顶部TabBar  
                    const bottomNavBarHeight = uni.upx2px(100); // 底部NavBar  
                    const bottomSafeArea = systemInfo.screenHeight - systemInfo.safeArea?.bottom || 0; // 底部安全区  
                    // 3. 计算WebView可用高度(关键公式)  
                    const webviewHeight = systemInfo.windowHeight -  
                        statusBarHeight -  
                        tabBarHeight -  
                        bottomNavBarHeight -  
                        bottomSafeArea;  
                    // 4. 动态创建WebView  
                    const webview = plus.webview.create(  
                        this.webviewSrc,  
                        'dynamic-webview', {  
                            // 关键样式配置  
                            position: 'absolute',  
                            top: `${statusBarHeight + tabBarHeight}px`,  
                            height: `${Math.max(webviewHeight, 200)}px`,  
                            bottom: `${bottomNavBarHeight + bottomSafeArea}px`,  
                            progress: {  
                                color: '#FF0000'  
                            }, // 进度条颜色(虽然关闭但需定义)  
                            hardwareAccelerated: true, // 启用硬件加速  
                            // iOS专属优化  
                            wkwebview: {  
                                opacity: 0.99  
                            },  
                            // Android专属优化  
                            additionalHttpHeaders: {  
                                'Cache-Control': 'no-cache'  
                            }  
                        })  
                    // 5.   事件监听  
                    webview.addEventListener('loaded', () => {  
                        console.log('webview加载完成')  
                        setTimeout(() => {  
                            const params = {  
                                type: 'init',  
                                data: {  
                                    windowWidth: '100%',  
                                    windowHeight: '100%',  
                                    uniPlatform: systemInfo.uniPlatform,  
                                }  
                            }  
                            webview.evalJS(`receiveData(${JSON.stringify(params)})`)  
                        }, 1500)  
                    })  

                    // 6. 添加到当前页面  
                    this.getSafeWebview().append(webview)  

                    webview.addEventListener('message',evt => {  
                        console.log(evt, 'postMessage')  
                    })  
                    webview.addEventListener('WebviewCustomButtonCallback',evt => {  
                        console.log(evt, 'WebviewCustomButtonCallback')  
                    })  
                    webview.addEventListener('postmessage',evt => {  
                        console.log(evt, 'postMessage')  
                    })  
                    webview.addEventListener('WebviewCustomButtonCallback',evt => {  
                        console.log(evt, 'WebviewCustomButtonCallback')  
                    })  
                } catch (error) {  
                    console.error('创建WebView失败:', error);  
                }  
            },
2025-03-30 13:24 负责人:无 分享
已邀请:
9***@qq.com

9***@qq.com (作者)

第一种

复制代码dynamicWebview.addEventListener('titleUpdate', (evt) => {  
  console.log(JSON.stringify(evt))  
})

h5: 通过修改document.title 去实现数据更新

第二种

复制代码plus.globalEvent.addEventListener('plusMessage', evt => {  
  if (dynamicWebview && dynamicWebview['__uuid__'] === evt.originId) {  
    //  h5传过来的消息      
    console.log(evt.data.args);  
   }  
})

h5: 通过uni.postMessage

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容