vue给iframe传值

可以使用postMessage方法来实现vue给iframe传值。具体步骤如下：

1. 在vue中，获取到需要传递的数据。
2. 获取到iframe元素，通过contentWindow属性获取到iframe的window对象。
3. 调用window对象的postMessage方法，将数据发送到iframe中。

示例代码如下：

// 获取到需要传递的数据
const data = { name: '张三', age: 20 };

// 获取到iframe元素
const iframe = document.getElementById('my-iframe');

// 获取到iframe的window对象
const iframeWindow = iframe.contentWindow;

// 将数据发送到iframe中
iframeWindow.postMessage(data, '*');

在iframe中，可以通过监听message事件来获取到vue传递过来的数据。示例代码如下：

// 监听message事件
window.addEventListener('message', function(event) {
  // 获取到传递过来的数据
  const data = event.data;
  console.log(data);
});

需要注意的是，由于postMessage方法可以跨域传递数据，因此需要在接收数据的iframe中对数据来源进行验证，以确保数据安全。

相关问题

vue内嵌iframe传值

在Vue中内嵌第三方网页可以通过使用iframe来实现。可以将iframe的src属性设置为需要嵌入的第三方页面的URL，然后将iframe添加到Vue组件的模板中。例如，在Vue组件的template中添加以下代码来嵌入一个iframe：

<template>
  <div>
    <iframe src="http://example.com" id="iframe" scrolling="no" frameborder="0"></iframe>
  </div>
</template>

然后，在样式部分通过设置iframe的宽度和高度来控制其显示的尺寸：

<style>
  #iframe {
    width: 100%;
    height: calc(100vh - 115px);
  }
</style>

这样就可以在Vue中成功内嵌第三方网页了。请注意，为了避免安全问题，可能需要在后台进行一些设置，比如设置X-Frame-Options配置的值为disable来允许iframe访问本服务资源。具体的设置可以参考后台的安全配置文档。

另外，如果需要在Vue中动态加载多个iframe页面，可以通过循环创建多个iframe元素并设置不同的src属性来实现。通过控制这些iframe元素的显示与隐藏，可以实现在同一个页面中加载多个第三方网页。例如可以通过将iframe和router-view放在同一个页面，并通过循环创建多个iframe元素来加载不同的页面，然后通过显示和隐藏来控制这些iframe的加载和展示。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

iframe传值vue

以下是两种iframe传值给Vue的方法：

1. 在Vue中给iframe传值

<!-- Vue模板 -->
<template>
  <div>
    <button @click="fatherpost">给iframe传值</button>
    <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    // 挂载在mounted中
    this.iframeWin = this.$refs.iframe.contentWindow;
  },
  methods: {
    fatherpost(e) {
      // 点击给iframe传值
      this.iframeWin.postMessage("我是来自父页面的data", '*');
    },
  },
};
</script>

2. 在iframe中给Vue传值

<!-- iframe模板 -->
<template>
  <div>
    <button @click="sonpost">向父亲传值</button>
  </div>
</template>

<script>
export default {
  methods: {
    sonpost() {
      window.parent.postMessage("我是子页面的test！", '*');
    },
  },
};
</script>

注意：在Vue项目中接收消息的代码应该写在Vue实例的生命周期函数中，例如mounted()或created()。