Vue中使用iframe加载HTML文件

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

m0_57996540

5489人浏览 · 2023-05-11 21:15:32

m0_57996540 · 2023-05-11 21:15:32 发布

在Vue中使用iframe加载HTML文件，可以通过以下步骤实现：

在Vue组件中添加一个iframe元素，例如：

<template>
  <div>
    <iframe src="path/to/your/html/file"></iframe>
  </div>
</template>

在Vue组件中添加样式，以确保iframe元素占据整个父元素的空间，例如：

<template>
  <div>
    <iframe src="path/to/your/html/file"></iframe>
  </div>
</template>

<style>
  div {
    position: relative;
    width: 100%;
    height: 100%;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

在Vue组件中添加一个data属性，用于存储iframe的src属性值，例如：

<template>
  <div>
    <iframe :src="iframeSrc"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'path/to/your/html/file'
    }
  }
}
</script>

在Vue组件中添加一个方法，用于动态改变iframe的src属性值，例如：

<template>
  <div>
    <input type="text" v-model="iframeSrc">
    <button @click="changeIframeSrc">Load HTML</button>
    <iframe :src="iframeSrc"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: ''
    }
  },
  methods: {
    changeIframeSrc() {
      this.iframeSrc = 'path/to/your/html/file';
    }
  }
}
</script>

这样，就可以在Vue中使用iframe加载HTML文件了。需要注意的是，由于浏览器的安全限制，如果HTML文件与Vue应用不在同一个域名下，可能会出现跨域问题。

在Vue中与iframe通信，可以通过以下步骤实现：

在Vue组件中添加一个iframe元素，并为其添加一个id属性，例如：

<template>
  <div>
    <iframe ref="my-iframe" src="path/to/your/html/file"></iframe>
  </div>
</template>

在Vue组件中添加一个方法，用于向iframe发送消息，例如：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
    <iframe id="my-iframe" src="path/to/your/html/file"></iframe>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$refs.iframe.contentWindow.postMessage({
      	params:yourData /*在iframe页面中接收通过key也就是param接收，因此传输的数据可以是对象，包含多个key以及对应的数据*/
      }, '*');
    }
  }
}
</script>

在iframe中添加一个事件监听器，用于接收来自Vue的消息，例如：

<!DOCTYPE html>
<html>
<head>
  <title>My HTML File</title>
</head>
<body>
  <script>
    window.addEventListener('message', event => {
      if (event.origin !== 'http://localhost:8080') return; // 防止跨域攻击
      console.log(event.data.params); // 输出来自Vue的消息
    });
  </script>
</body>
</html>

这样，就可以在Vue和iframe之间进行通信了。需要注意的是，为了防止跨域攻击，需要在iframe中添加一个事件监听器，并在其中检查消息的来源。

GitHub 加速计划 / vu / vue

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：8 个月前 )

9e887079 [skip ci] 6 个月前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 10 个月前