作为一个没有什么情怀和追求的前端工程师, 是么有怎么考虑过 iframe 用法的, (毕竟从学习到工作自己扮演的一直是"前端小妹妹"的角色, 这种脏活累活一般是交给后端臭屌丝的,直到公司的全栈妹子来找我探讨这个跨域通信的问题);
真是不看不知道, 一看吓一跳. 原来 iframe 也存在跨域的问题. 跨域和不跨域情况下和父级页面的通信方式也是略有不同.
文中示例代码均在github
同域情况下的父子页面通信方式
show you the demo
父级页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function say() {
console.log("i am father page");
}
function callChild() {
mySon.window.say();
mySon.window.document.getElementById('button').innerHTML = '调用结束';
}
</script>
<button id="button" onclick="callChild()"> 调用儿子的方法 </button>
<iframe name="mySon" src="http://localhost:3000/demo.html?aim=xiaopang" frameborder="0"></iframe>
</body>
</html>
儿子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function say() {
console.log('i am child page');
}
function callFather() {
parent.say();
parent.window.document.getElementById('button').innerHTML = '调用结束'
}
</script>
<button id="button" onclick="callFather()"> 调用爸爸的方法 </button>
</body>
</html>
以上示例功能
-
调用函数:
- 父级页面调用子页面的函数 name.window.func();
- 子页面调用父级页面的函数 parent.window.func();
访问页面元素
window都拿到了，元素不会拿。请自行百度。
ps: 注意事项:
儿子页面加载完成后再进行访问, 判断方法:
- iframe 上添加 onload 事件;
- document.readyState == 'complete';
跨域情况下父子页面通信的方法
如果 iframe 所链接的是外部的页面, 尼玛, 居然有跨域限制, 有跨域限制, 有跨域限制......
父页面向子页面传递数据
跨域情况下的父子页面通信的原理大概就是使用 hash / 直接传参数搞定;倾向于hash;
- 在子页面中通过定时器监听 location.hash 的变化就能够拿到父级页面传来的数据啦;
- 一次性的从父页面 get 过来的参数中提取有用的部分,就 OK 啦;
子页面向父页面传递数据
跨域情况下,子页面向父页面传递数据的实现原理是使用一个代理的 iframe (就像是跨域请求中的代理服务器一样), 并且保持代理的子页面和父级页面是同域的此时就可以通过, window.top 或者 window.parent.parent 就可以获取父级页面的引用啦. 哔哩哔哩...
不 bb 上 demo
父级页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
我是彩笔圈圈
<script>
var i = 1;
function say(data) {
console.log('我是爸爸' + data);
}
function add() {
document.getElementById('quanquan').setAttribute('src', 'http://localhost:3000/demo2.html?aim=quanquan#'+ ++i)
}
</script>
<button onclick="add()">+1</button>
<iframe id='quanquan' src="http://localhost:3000/demo2.html?aim=quanquan#1" frameborder="0"></iframe>
</body>
</html>
子级页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var hash = location.hash, i = 1;
function checkData() {
if(hash !== location.hash) {
hash = location.hash
console.log('我是儿子' + hash);
}
}
function say() {
console.log('i am child page');
}
function callFather() {
document.getElementById('quanquan').setAttribute('src', 'http://localhost:4000/proxy.html#'+ ++i)
}
setInterval(checkData, 1e3);
</script>
<button id="button" onclick="callFather()"> 调用爸爸的方法 </button>
<iframe id="quanquan" style="display: none" src="http://localhost:4000/proxy.html#1" frameborder="0"></iframe>
</body>
</html>
proxy 中转页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>proxy</title>
</head>
<body>
<script>
var hash = location.hash;
function callGrandFather(data) {
window.top.say(data);
};
function checkData() {
if ( hash !== location.hash ) {
callGrandFather(location.hash);
hash = location.hash;
}
}
setInterval(checkData, 1e3);
</script>
</body>
</html>