html5父子页面数据传递,使用iframe标签嵌套页面时 如何进行父子页面通讯/传值...

父页面使用iframe标签引入子页面 (使用本地文件)

父页面

function myFunction(e) {

console.log("我是父页面的方法")

}

引入本地路径的页面符合同根同源策略 是不会存在跨域的 但是有一点需要注意的是  需要部署到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("带带弟弟吧");

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

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

当你子页面调用父页面的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 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

分享到：