uni-app plus.webview.create创建的webview中uni.postMessage会触发app报错

uni-app plus.webview.create创建的webview中uni.postMessage会触发app报错

开发环境信息

类别 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 Android
手机系统版本号 Android 9.0
手机厂商 模拟器
手机机型 雷电模拟器
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码

// uniapp
const wv = plus.webview.create('http://10.22.1.0:5500/test.html', 'test2')  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}
...
</script>
</body>
</html>

操作步骤

  1. webview页面中接入uni-webview.js，然后uni.postMessage
  2. uniapp页面通过plus.webview.create创建webview
  3. webview中触发postmessage即可触发报错 [JS Framework] Failed to execute the callback function: TypeError: Cannot read property ‘nodeName’ of null

预期结果

webview中uni.postMessage可正常工作，不触发报错

实际结果

webview中uni.postMessage作触发报错：

[JS Framework] Failed to execute the callback function: TypeError: Cannot read property ‘nodeName’ of null

导致后续app内交互失效

bug描述

plus.webview.create创建网页后，网页中uni.postMessage会触发报错

21:48:49.199 [JS Framework] Failed to execute the callback function: TypeError: Cannot read property ‘nodeName’ of null 21:48:49.228 reportJSException >>>> exception function:<WEEX_CALL_JAVASCRIPT>, exception:JavaScript execute error!Uncaught TypeError: Cannot read property ‘nodeName’ of null at id (uni-jsframework.js:32:224495) at pI (uni-jsframework.js:32:224670) at hP (uni-jsframework.js:32:241140) at dP (uni-jsframework.js:32:241052) at (uni-jsframework.js:32:241777) at emit (uni-jsframework.js:17:11122) at subscribeHandler (uni-jsframework.js:32:45543) at Lg (uni-jsframework.js:32:238387) at consume (uni-jsframework.js:17:15411) at callback (uni-jsframework.js:19:1659)


更多关于uni-app plus.webview.create创建的webview中uni.postMessage会触发app报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个问题解决了吗

更多关于uni-app plus.webview.create创建的webview中uni.postMessage会触发app报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 plus.webview.create 创建 WebView 时，如果在 WebView 中使用 uni.postMessage 向原生应用发送消息，可能会导致应用报错。这通常是因为 uni.postMessage 的使用方式不正确，或者 WebView 的配置有问题。

以下是一些可能的原因和解决方案：

1. 确保 WebView 已正确加载

  • 在调用 uni.postMessage 之前，确保 WebView 已经完全加载。可以在 WebView 的 loaded 事件中执行 uni.postMessage。
var webview = plus.webview.create('https://example.com', 'myWebview', {
    // 配置项
});

webview.addEventListener('loaded', function() {
    uni.postMessage({
        data: 'Hello from WebView'
    });
});

webview.show();

2. 检查 uni.postMessage 的使用

  • uni.postMessage 是用于向原生应用发送消息的，确保你在 WebView 中正确使用了它。uni.postMessage 只能在 WebView 的上下文中使用，不能在普通的 H5 页面中使用。
uni.postMessage({
    data: 'Hello from WebView'
});

3. 检查原生端的消息监听

  • 在原生端（如 Android 或 iOS），确保你已经正确监听了来自 WebView 的消息。如果没有正确监听，可能会导致应用报错。
plus.globalEvent.addEventListener('plusMessage', function(e) {
    console.log('Received message from WebView:', e.data);
});

4. 检查 WebView 的配置

  • 确保 WebView 的配置项正确，特别是 allowsInlineMediaPlayback 和 mediaPlaybackRequiresUserAction 等配置项，这些配置项可能会影响 WebView 的行为。
var webview = plus.webview.create('https://example.com', 'myWebview', {
    allowsInlineMediaPlayback: true,
    mediaPlaybackRequiresUserAction: false
});

5. 检查 WebView 的 URL

  • 确保 WebView 加载的 URL 是正确的，并且可以正常访问。如果 URL 无法访问，可能会导致 WebView 加载失败，进而导致 uni.postMessage 无法正常工作。

6. 调试和日志

  • 使用 console.log 或 plus.log 在关键位置添加日志，帮助定位问题所在。
console.log('WebView loaded');
uni.postMessage({
    data: 'Hello from WebView'
});
回到顶部