uniapp使用iframe内嵌html并实现相互通信

在uniapp中，使用iframe内嵌HTML页面并实现它们之间的相互通信，可以通过以下步骤实现：

在uniapp项目中，使用<web-view>组件作为容器，来加载外部的HTML页面。
使用postMessage方法实现跨文档消息传递（cross-document messaging）。

以下是一个简单的示例：

父页面（uniapp）：




<template>
  <view>
    <!-- 使用web-view组件加载外部页面 -->
    <web-view src="https://your-external-html-page.com" @message="handleMessage"></web-view>
  </view>
</template>
 
<script>
export default {
  methods: {
    handleMessage(event) {
      // 处理接收到的消息
      console.log('收到消息:', event.detail.data);
    },
    sendMessageToIframe() {
      // 向iframe发送消息
      this.$refs.webview.postMessage({ action: 'your-action', data: 'your-data' });
    }
  }
}
</script>

外部HTML页面：




<!DOCTYPE html>
<html>
<head>
  <title>Your External HTML Page</title>
</head>
<body>
  <script>
    // 监听消息
    window.addEventListener('message', function(event) {
      // 确保消息来源可靠
      if (event.origin !== 'https://your-uniapp-page.com') return;
 
      // 处理接收到的消息
      console.log('收到消息:', event.data);
 
      // 回复消息（可选）
      event.source.postMessage({ action: 'response-action', data: 'response-data' }, event.origin);
    });
 
    // 发送消息
    window.parent.postMessage({ action: 'your-action', data: 'your-data' }, 'https://your-uniapp-page.com');
  </script>
</body>
</html>

在这个示例中，父页面使用<web-view>组件加载了一个外部HTML页面。父页面监听message事件来接收来自iframe的消息，并使用postMessage方法向iframe发送消息。iframe页面监听同样的事件来接收消息，并可以选择使用postMessage回复消息。

请确保替换your-external-html-page.com和your-uniapp-page.com为实际的域名，并处理好跨域问题。在实际应用中，应确保通信过程中的数据安全和保密性。

uniapp使用iframe内嵌html并实现相互通信

评论已关闭

推荐阅读