js 的 iframe 父子页面通信的简单方法

最新推荐文章于 2024-04-28 19:21:12 发布

周搏

最新推荐文章于 2024-04-28 19:21:12 发布

阅读量1.3k

点赞数

分类专栏： iframe 文章标签： iframe

iframe 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

导语，最近公司嵌套第三方电销系统的电话条，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>

周搏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 的 iframe 父子页面通信的简单方法

导语，最近公司嵌套第三方电销系统的电话条，iframe嵌入方式，但是之间通信是在搞不懂，就搜到了这篇博客，在此谢谢作者原文链接：https://my.oschina.net/sallency/blog/1618971获取子页面的 window 对象在父页面中，存在如下两个对象window.frames,document.iframeElement.contentWind...
复制链接

扫一扫