iframe 如何传值

可以使用 JavaScript 来实现 iframe 传值。具体步骤如下：

1. 在父页面中定义一个函数，用于接收 iframe 传递的值。

function receiveValue(value) {
  console.log('接收到的值为：' + value);
}

2. 在 iframe 页面中，通过 window.parent 调用父页面中的函数，并传递需要传递的值。

window.parent.receiveValue('这是传递的值');

3. 在父页面中，通过监听 message 事件来接收 iframe 传递的值。

window.addEventListener('message', function(event) {
  console.log('接收到的值为：' + event.data);
});

注意：在使用 iframe 传值时，需要确保父页面和 iframe 页面在同一域名下，否则会出现跨域问题。

相关问题

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()。

layui iframe传值

在 layui中，可以通过url传递参数来实现iframe与父页面之间的数据传递。

在父页面中，可以使用以下代码来打开iframe并传递参数：

layui.use('layer', function(){
  var layer = layui.layer;
  layer.open({
    type: 2,
    title: 'iframe传值示例',
    shadeClose: true,
    shade: 0.8,
    area: ['800px', '600px'],
    content: 'iframe.html?id=123',
    end: function(){
      // 关闭时触发的回调函数
    }
  }); 
});

在iframe页面中，可以使用以下代码来获取父页面传递的参数：

var id = getUrlParam('id');
console.log(id);

function getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.parent.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

其中，getUrlParam()函数是用来获取url参数的函数，可以在其他项目中复用。