uni-app中app端使用plus.webview.create创建窗口后，webview窗口如何向外部传递信息

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app中app端使用plus.webview.create创建窗口后，webview窗口如何向外部传递信息

如何在使用 plus.webview.create 创建的窗口内向外部发送消息

不使用 <web-view> 标签创建，而是使用 plus.webview.create 创建窗口（不想进行页面跳转），webview窗口内如何向外部发送消息

Harmonyos Next教程
2 回复

webview和uni-app的双向通信可以使用以下方式：
webview/h5 发送消息： plus.webview.postMessageToUniNView({
type: ‘toUniAPP’,
args: {
arg1: ‘123’
}
}, ‘__uniapp__service’); uni-app 接受消息： plus.globalEvent.addEventListener(‘plusMessage’, (message)=>{
// message打印的结果：
// {
// “data”: {
// “type”: “toUniAPP”,
// “args”: {
// “arg1”: “123”
// }
// },
// “targetId”: “__uniapp__service”,
// “originId”: “NWindow101677899611098”
// }
})


在uni-app中，通过plus.webview.create创建的webview窗口与外部进行通信，可以通过postMessage方法和监听message事件来实现。以下是一个简单的代码示例，展示如何在webview窗口与外部之间传递信息。

主窗口代码（外部页面）

首先，在主窗口（外部页面）中创建一个webview窗口，并监听其message事件来获取webview窗口传递的信息。

// 创建webview窗口
let webview = plus.webview.create('webview-page.html', 'webview', {
    top: '0px',
    bottom: '0px'
});

// 显示webview窗口
webview.show();

// 监听webview窗口的message事件
webview.addEventListener('message', function(event) {
    console.log('Received message from webview:', event.message);
    // 在这里处理从webview窗口接收到的信息
    // 例如，可以更新主窗口的某些UI元素
    document.getElementById('main-content').innerText = event.message;
});

Webview窗口代码（内部页面 - webview-page.html）

在webview窗口（内部页面）中，使用postMessage方法向外部传递信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webview Page</title>
</head>
<body>
    <button onclick="sendMessage()">Send Message to Main Window</button>

    <script>
        // 发送消息到主窗口
        function sendMessage() {
            let message = 'Hello from webview!';
            // 使用postMessage方法发送消息
            window.parent.postMessage(message, '*'); // 注意：'*' 表示接受消息的目标源，生产环境中应替换为具体源
            console.log('Message sent:', message);
        }
    </script>
</body>
</html>

注意事项

  1. 安全性：在postMessage的第二个参数中，'*'表示接受消息的目标源可以是任何源。在实际应用中，为了安全起见，应将其替换为具体的源地址，以避免跨源消息泄露。

  2. 事件监听：确保在主窗口中正确监听message事件，以便接收并处理来自webview窗口的信息。

  3. 页面加载：在webview窗口的页面完全加载后再进行通信操作，以避免因页面未加载完成而导致的通信失败。

通过上述代码示例，你可以在uni-app中实现webview窗口与外部页面之间的信息传递。

回到顶部