使用iframe标签嵌套页面时如何进行父子页面通讯/传值

父页面使用iframe标签引入子页面（使用本地文件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父页面</title>
</head>
<body>
    <div>
        <iframe id="myFrame" name="myFrame" src="child.html"></iframe>
    </div>
    <script>
        function myFunction(e) {
            console.log("我是父页面的方法")
        }
    </script>
</body>
</html>

引入本地路径的页面符合同根同源策略是不会存在跨域的但是有一点需要注意的是需要部署到web服务器使用不支持本地file协议打开

（本地直接打开的话依然会报跨域的错误：Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.）

如果子页面调用父页面的 myFunction 直接在子页面写：

parent.myFunction();

//控制台输出：我是父页面的方法

也可以带参调用

//父页面方法
function myFunction(e) {
      console.log("我是父页面的方法")
}


//子页面调用

parent.myFunction("带带弟弟吧");

//控制台输出：带带弟弟吧

如果使用的不是本地路径而是第网址路径的话像这样：

<iframe id="myFrame" name="myFrame" src="http://www.linfengya.cn/child.html"></iframe>

当你子页面调用父页面的myFunction() 方法时就会造成跨域报错：

child.htmlUncaught DOMException: Blocked a frame with origin "https://www.*******.com" from accessing a cross-origin frame.
at palyEnd (https://www.*****.com/child.html:83:20)
at HTMLVideoElement.onended (https://www.********.com/child.html:1:1)

这个时候可以时候 window.postMessage 这个方法，它可以绕过同域限制实现跨域通信用官方来讲它的格式如下：

targetWindow.postMessage(message, targetURL[, transferObject]);

参数一为要发送的数据可以是字符串可以使数组也可以是对象

参数二为发送数据的目标地址目标窗口的协议主机地址或端口指定数据发送至该目标通俗来讲就是子页面的地址出于安全考虑用于确认发送给谁的（简单粗暴可以直接写 “ * ” 号代表允许所有地址接收我的数据）

/**子页面发送数据给父页面*****/


//数据格式为字符串
parent.postMessage('带带弟弟吧','*');

//数据格式为对象
parent.postMessage({name: '我是枫枫呀',age:17},'*');

子页面数据发送给父页面之后父页面需要监听message事件来获取到子页面传来的数据

/**父页面监听子页面传来的数据 并进行接收****/


window.addEventListener("message", function(e) {
    // 打印子页面传来的数据
    console.log(e.data)
}, false);


----------------------更为严谨的写法-----------------------

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
   // 打印子页面传来的数据
    console.log(e.data)
}, false); 



//如果出于安全考虑 需要验证目标地址是否为发送数据的地址
//比如这样发送的：
//parent.postMessage('带带弟弟吧','http://www.linfengya.cn');
//那么接收时候我们要加一个验证

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
    //如果本地址非数据发送规定地址  就直接return出去
    if (event.origin !== "http://www.linfengya.cn") return;
   // 打印子页面传来的数据
    console.log(e.data)
}, false);

本文最后更新于2020-5-8，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！