vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。

在Vue项目中嵌套静态HTML项目并实现数据交互，可以通过以下步骤实现：

在Vue项目中创建一个HTML文件，并将其放在Vue项目的静态资源目录（通常是public或static）中。
在Vue组件中，使用<iframe>标签嵌入这个HTML文件。
通过postMessage API在Vue组件和嵌套的HTML页面之间发送数据。

以下是具体实现的示例代码：

Vue组件中的代码：




<template>
  <div>
    <!-- 嵌入静态HTML页面 -->
    <iframe id="static-iframe" :src="iframeSrc" @load="iframeLoaded"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      iframeSrc: process.env.BASE_URL + 'static-page.html'
    };
  },
  methods: {
    iframeLoaded() {
      // 当iframe加载完成后发送数据
      const message = { greeting: 'Hello from Vue app!' };
      this.$refs.iframe.contentWindow.postMessage(message, '*');
    }
  }
};
</script>

静态HTML页面中的代码 (static-page.html)：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Static Page</title>
  <script>
    // 监听从Vue应用发送来的消息
    window.addEventListener('message', function(event) {
      if (event.origin !== window.location.origin) return;
      
      const data = event.data;
      console.log('Received message:', data);
      // 处理数据...
    });
  </script>
</head>
<body>
  <h1>This is a static HTML page.</h1>
</body>
</html>

在这个例子中，Vue组件中的<iframe>标签引用了位于Vue项目静态资源目录中的静态HTML页面。一旦iframe加载完成，Vue组件通过postMessage方法向iframe内部发送消息。静态HTML页面通过监听message事件来接收和处理这些消息。

请确保在实际部署时，静态资源的路径正确，并且遵循同源策略或者正确设置postMessage的允许来源。

vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

评论已关闭

推荐阅读