iframe调用父页面js方法|极客笔记

iframe调用父页面js方法

一、什么是iframe

在网页开发中，iframe（内联框架）是HTML中一个非常重要的元素，它可用于在当前网页中嵌入另一个独立的网页，从而实现页面的模块化和复杂布局。通过使用iframe，可以将不同的网页组合在一起，实现各种互动效果和功能。

二、iframe如何调用父页面的js方法

在某些情况下，子页面（iframe中的页面）需要调用父页面（包含iframe的页面）中的js方法。下面将详细介绍几种常用的方法。

1. 使用window对象的parent属性

通过window.parent可以访问到父页面的window对象，从而调用父页面中的js方法。以下是一个示例：

<!-- 在父页面中定义一个JS方法 -->
<script>
    function greet() {
        alert("Hello, I am the parent page!");
    }
</script>

<!-- 子页面中的iframe -->
<iframe src="child.html"></iframe>

<!-- 子页面（child.html）中的JS代码 -->
<script>
    // 调用父页面中的greet方法
    window.parent.greet();
</script>

运行结果：弹出一个对话框，显示”Hello, I am the parent page!”。

2. 使用postMessage进行跨域消息传递

如果iframe和父页面属于不同的域名，上述方法可能存在跨域安全限制。这时可以使用postMessage进行跨域消息传递。以下是一个示例：

在父页面中的JS代码：

<!-- 在父页面中定义message事件的监听函数 -->
<script>
    window.addEventListener("message", function(event) {
        if (event.data === "greet") {
            greet();
        }
    });

    function greet() {
        alert("Hello, I am the parent page!");
    }
</script>

<!-- 子页面中的iframe -->
<iframe src="child.html" id="child" onload="initIframe()"></iframe>

<script>
    function initIframe() {
        var child = document.getElementById("child");
        child.contentWindow.postMessage("greet", "*");
    }
</script>

在子页面中的JS代码：

<!-- 子页面中 -->
<script>
    // 监听message事件，当接收到父页面发送的消息时调用greet方法
    window.addEventListener("message", function(event) {
        if (event.data === "greet") {
            greet();
        }
    });

    // 向父页面发送message
    window.parent.postMessage("greet", "*");

    function greet() {
        alert("Hello, I am the child page!");
    }
</script>

运行结果：弹出两个对话框，分别显示”Hello, I am the parent page!”和”Hello, I am the child page!”。

3. 使用window对象的top属性

如果iframe嵌套了多层，可以使用window.top来访问最顶层的父页面的window对象，从而调用其js方法。

<!-- 在最顶层的父页面中定义一个JS方法 -->
<script>
    function greet() {
        alert("Hello, I am the top parent page!");
    }
</script>

<!-- 子页面中的iframe -->
<iframe src="child.html"></iframe>

<!-- 子页面（child.html）中的JS代码 -->
<script>
    // 调用最顶层父页面中的greet方法
    window.top.greet();
</script>

运行结果：弹出一个对话框，显示”Hello, I am the top parent page!”。

4. 使用window对象的frames属性

如果要在多个嵌套的iframe中调用父页面的js方法，可以使用window.frames属性来访问其他iframe的window对象。

<!-- 在父页面中定义一个JS方法 -->
<script>
    function greet() {
        alert("Hello, I am the parent page!");
    }
</script>

<!-- 子页面中的两个iframe -->
<iframe src="child1.html" id="frame1"></iframe>
<iframe src="child2.html" id="frame2"></iframe>

<!-- 子页面一（child1.html）中的JS代码 -->
<script>
    // 调用其他iframe中的greet方法
    window.frames["frame2"].greet();
</script>

<!-- 子页面二（child2.html）中的JS代码 -->
<script>
    // 调用其他iframe中的greet方法
    window.frames["frame1"].greet();
</script>

运行结果：弹出两个对话框，分别显示”Hello, I am the parent page!”。

三、总结

通过上述几种方法，可以实现在iframe中调用父页面的js方法。使用window.parent、window.top和window.frames属性，以及postMessage方法可以在不同的情况下实现跨域或多层嵌套的父子页面之间的通信。在实际开发中，根据具体的需求和情况选择合适的方法即可。