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

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

要回复问题请先登录注册