导语,最近公司嵌套第三方电销系统的电话条,
iframe
嵌入方式,但是之间通信是在搞不懂,就搜到了这篇博客,在此谢谢作者
原文链接:https://my.oschina.net/sallency/blog/1618971
获取 子页面 的 window
对象
在父页面中,存在如下两个对象window.frames
,document.iframeElement.contentWindow
,可以获取到 子页面 window
对象
// iframe id
document.getElementById('menuIframe').contentWindow
// iframe name
window.frames['menuIframe'].window
// iframe index 当前窗体的第几个 iframe
window.frames[1].window
既然拿到了
window
对象,那函数和DOM
就到手了。您想做什么都可以了不是。。。。。哈哈
子 iframe
获取 父页面
window.parent
对象
window.top
对象
// 判断当前页面是否是 iframe 或 顶级页面
window.parent == window
window.top == window
window.parent
即为当前页面的上一级页面的window
对象,如果当前页面已是 顶层 页面,则window.parent
就是自己
小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="/sub.html" name="iframeContainer" id="iframeContainer"></iframe>
<script type="text/javascript">
function parentHello() {
alert("this is parent hello function!");
}
window.frames['iframeContainer'].subHello();
</script>
</body>
</html>
<!-- sub.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function subHello() {
alert("this is sub hello function!");
}
window.parent.parentHello();
</script>
</body>
</html>