父页面使用iframe标签引入子页面 (使用本地文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="/h5%E7%AD%BE%E5%AD%97.html" frameborder="0"></iframe>
<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 src="http://127.0.0.1:5500/h5%E7%AD%BE%E5%AD%97.html" frameborder="0"></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);