从多个方面理解iframe传值

一、vue中的iframe传值

在vue的框架中，如果需要把一个页面嵌套到另一个页面中，可以使用iframe标签。一般情况下，如果需要把一些数据从子页面传到父页面，可以使用iframe的contentWindow属性，然后在子页面中通过postMessage函数向父页面发送消息，从而实现数据传递。

// 父页面

<iframe src="child.html" id="frame" width="100%" height="600" frameborder="0"></iframe>

    window.addEventListener('message', function (event) {
      console.log(event.data)
    }, false);

   var iframe = document.getElementById("frame");
   iframe.contentWindow.postMessage("hello world", "*");


// 子页面


    window.addEventListener('message', function (event) {
      console.log(event.data)
    }, false);

    window.parent.postMessage("hello world", "*");

在父页面中，可以通过添加监听函数，监听子页面发来的消息，然后进行相应的处理。同样，在子页面中也可以添加监听函数，监听父页面发来的消息。

二、iframe传值的依赖

在使用iframe传值的过程中，可能会涉及到一些依赖。常用的依赖包括postMessage、easyXDM、window.name、hashchange等。

其中，postMessage是比较常用的一种依赖方式，在上述vue中已经有所涉及。而easyXDM则是一个更为高级的跨域解决方案，它支持所有现代浏览器，并且支持IE6+。

而window.name则是一种比较特殊的方式，它可以通过在父页面中设置window.name的值，然后在子页面中获取这个值，来实现数据传递。而hashchange则是通过监听URL的hash部分的变化来实现数据传递。

三、iframe传值到父页面

当需要在iframe中传值到父页面中时，可以使用postMessage函数。具体实现可以参照上方vue中的例子。在父页面中，可以监听子页面发来的消息，并进行相应的处理。

在一些特殊情况下，可能需要在iframe中传递一个对象，这时可以采用JSON.stringify函数和JSON.parse函数来完成数据的序列化和反序列化。

// 父页面

  window.addEventListener('message', function (event) {
    console.log(event.data)
  }, false);

// 子页面

  window.parent.postMessage(JSON.stringify({name: '小明', age: 18}), '*');

四、iframe传值给父页面

当需要在父页面中获取iframe中的值时，可以使用contentWindow属性来获取iframe的window对象，从而访问iframe中的数据。


<iframe src="child.html" id="frame" width="100%" height="600" frameborder="0"></iframe>

    var iframe = document.getElementById('frame');
    console.log(iframe.contentWindow.document.body.innerHTML);

以上代码中，通过获取iframe的window对象，进而获取子页面中的body内的HTML文本。同样，也可以获取其他页面元素的值，并进行相应的处理。需要注意的是，由于跨域的限制，有些情况下获取iframe中的值可能会受到限制。

五、layui中的iframe传值

在layui的框架中，可以使用iframe标签将一个页面嵌入到主页面中。在iframe页面中，可以通过父页面中的layui.admin.popup.qxuiframe函数向父页面发送消息。

// 父页面

layui.use(['admin'], function(){
    var admin = layui.admin;
    admin.popup.qxuiframe({
      id: 'iframe',
      area: ['800px', '550px'],
      url: 'child.html'
    });
});

// 子页面

parent.layui.admin.events.iframe('hello', 'world');

在父页面中，通过引入layui库之后，可以获取到admin对象，并使用它里面的popup.qxuiframe函数来打开一个iframe弹窗。

而在子页面中，则需要先获取到父页面的window对象，再通过它里面的layui.admin.events.iframe函数来向父页面发送消息。消息中可以包括任何需要传递的数据。

六、iframe怎么相互传递参数

在嵌套的iframe页面中，如果需要相互传递参数，可以使用postMessage函数。具体实现方式与vue中类似，不再赘述。

如果iframe页面之间需要建立链接，可以通过设置URL参数来完成。例如，在链接中添加“#”后，可以在URL中添加一些参数来完成数据传递。


<iframe src="child.html#name=小明&age=18" id="frame" width="100%" height="600" frameborder="0"></iframe>

在子页面中，可以通过访问location.hash来获取父页面传递的数据。


console.log(location.hash.substring(1)); // 输出 "name=小明&age=18"

七、iframe之间的相互传值

在两个iframe页面之间实现数据传递时，一般需要在父页面中进行协调。父页面可以在监听到一个iframe发送消息之后，再转发这个消息给另一个iframe。实现的具体实现方式与vue中大致相同，不再赘述。

需要注意的是，在实现跨域的iframe传值时，需要考虑到安全性问题。因此，应该采用安全性较高的postMessage函数作为主要的传值方式，避免出现安全漏洞。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/152879.html