父页面使用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('带带弟弟吧','');
//那么接收时候我们要加一个验证
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
//如果本地址非数据发送规定地址 就直接return出去
if (event.origin !== "") return;
// 打印子页面传来的数据
console.log(e.data)
}, false);
本文最后更新于-5-8，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
分享到：
