Vue2或者uniapp 中使用 iframe 嵌入本地 HTML 页面并相互通信。

在Vue2或者uni-app中嵌入本地HTML页面并进行互通有无通信，可以使用iframe标签进行页面嵌入，然后通过postMessage进行跨文档消息传递。

以下是在Vue2和uni-app中的实现方式：

Vue2中使用iframe嵌入本地HTML页面并互通有无：




<template>
  <div>
    <iframe ref="iframe" src="你的本地HTML页面路径" @load="onLoad"></iframe>
  </div>
</template>
 
<script>
export default {
  methods: {
    onLoad() {
      // 监听iframe加载完成后，向其发送消息
      this.$refs.iframe.contentWindow.postMessage('Hello from Vue app', '*');
    }
  }
}
</script>

在iframe加载完成后，向其发送消息。

在本地HTML页面中接收并处理消息：




<!DOCTYPE html>
<html>
<head>
  <title>Local HTML Page</title>
  <script>
    window.addEventListener('message', function(event) {
      console.log('Message received from Vue app:', event.data);
      // 对消息进行处理
      // 可以根据event.data进行相应的操作
      // 然后可以选择性的回复Vue应用
      event.source.postMessage('Hello back from local HTML', '*');
    });
  </script>
</head>
<body>
  <h1>This is a local HTML page</h1>
</body>
</html>

在uni-app中，由于其是基于WebView的，所以其中iframe的使用和Vue2中的使用方式几乎一样。

在iframe中发送消息：




<template>
  <view>
    <web-view src="你的本地HTML页面路径" @message="onMessage"></web-view>
  </view>
</template>
 
<script>
export default {
  methods: {
    onMessage(e) {
      console.log('收到消息', e.detail.data);
    }
  }
}
</script>

在本地HTML页面中接收并处理消息的方式也和在Vue2中一样。

注意：在实际使用中，为了安全，应该指定消息发送到特定的域名，而不是使用'*'。

以上就是在Vue2和uni-app中使用iframe进行页面嵌入和互通有无的方法和示例代码。

Vue2或者uniapp 中使用 iframe 嵌入本地 HTML 页面并相互通信。

评论已关闭

推荐阅读