iframe传递数据详解

一、iframe传递数据给父页面

在web开发中，我们经常需要在iframe中嵌套其他网页或者应用，需要将iframe中的数据传递给父页面进行处理。

我们可以通过window对象的top属性获取父页面的window对象，然后调用父页面中定义的函数实现数据的传递。

// 在iframe中调用父页面的函数
window.top.parentFunction(data);

二、iframe相互传递参数

在嵌套的iframe之间传递参数，也是web开发中的常见需求。

我们可以通过父页面的window对象的frames属性获取子页面的window对象，然后调用子页面中定义的函数传递数据。

// 在父页面中获取子页面的window对象
var frameWin = window.frames["subFrame"].contentWindow;
// 调用子页面的函数
frameWin.subFunction(data);

三、iframe请求数据

在iframe中使用ajax向后端请求数据，并将数据显示在页面中。

我们可以通过jquery的ajax方法向后端发送请求，然后使用iframe的contentDocument属性获取iframe中的document对象，设置iframe中的HTML内容。

$.ajax({
  url: "data.php",
  success: function(data){
    var iframeDoc = $("#myIframe").contents().get(0);
    iframeDoc.open();
    iframeDoc.write(data);
    iframeDoc.close();
  }
});

四、iframe跨域拿到数据

在iframe中跨域获取数据，需要使用window对象的postMessage方法实现。首先需要在目标域中定义一个接收消息的函数，然后在发送消息的域中发送消息。

// 目标域中定义接收消息的函数
function receiveMessage(event){
  // 处理接收到的数据
}
window.addEventListener("message", receiveMessage, false);

// 发送消息
var target = document.getElementById("targetIframe").contentWindow;
target.postMessage(data, "http://www.targetdomain.com");

五、iframe传递参数

在iframe中直接传递参数，可以使用iframe的src属性传递参数。在iframe的src属性中拼接参数，使用url编码。

var data = {name: "Alice", age: 18};
var encodedData = encodeURIComponent(JSON.stringify(data));
$("#myIframe").attr("src", "myIframe.html?data=" + encodedData);

六、iframe跨域传递数据

在不同域之间传递数据，需要使用window对象的postMessage方法。与第四点类似，需要在接收消息的域中定义一个接收消息的函数，然后在发送消息的域中发送消息。

// 目标域中定义接收消息的函数
function receiveMessage(event){
  // 处理接收到的数据
}
window.addEventListener("message", receiveMessage, false);

// 发送消息
var target = document.getElementById("targetIframe").contentWindow;
target.postMessage(data, "http://www.targetdomain.com");

七、iframe事件传递

在iframe中触发事件，父页面可以通过window对象的addEventListener方法监听事件。子页面通过window.parent对象获取父页面的window对象，然后使用父页面的document对象触发事件。

// 在子页面中触发事件
var evt = document.createEvent("HTMLEvents");
evt.initEvent("customEvent", false, true);
window.parent.document.dispatchEvent(evt);

// 在父页面中监听事件
window.addEventListener("customEvent", function(){
  // 处理事件
});

八、iframe数据交互

iframe中的数据交互，可以通过上述几种方式实现。除此之外，我们还可以使用全局变量在父页面和子页面之间共享数据。

// 在父页面中定义全局变量
window.globalData = {name: "Alice", age: 18};

// 在子页面中修改全局变量
window.parent.globalData.name = "Bob";