iframe如何调用父页面js方法

一、引言

在Web开发中，经常会遇到需要在一个嵌套的iframe中调用父页面的JavaScript方法的情况。本文将详细介绍如何在iframe中实现这个功能，并提供示例代码以及代码运行结果。

二、为什么需要调用父页面的js方法

当我们在Web开发中使用iframe嵌入其他页面或者内容时，有时候需要在iframe中执行一些操作，然后与父页面进行交互。而这些操作往往需要调用父页面中的JavaScript方法来完成，比如更新父页面中的数据、修改样式等。

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

以下是一种常见的在iframe中调用父页面JavaScript方法的方式：

1. 使用window.parent

通过window.parent属性可以访问父页面的全局window对象，从而调用父页面中定义的JavaScript方法。

示例代码如下：

<!-- 父页面 -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <iframe src="iframe.html" id="myIframe"></iframe>
    <script>
        function parentMethod() {
            console.log("这是父页面的方法");
        }
    </script>
</body>
</html>

<!-- iframe.html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <button onclick="callParentMethod()">调用父页面方法</button>
    <script>
        function callParentMethod() {
            // 调用父页面中的方法
            window.parent.parentMethod();
        }
    </script>
</body>
</html>

在上述示例中，我们在父页面中定义了一个名为parentMethod的JavaScript方法。然后在iframe.html中，点击按钮后触发了callParentMethod()方法，该方法使用window.parent来访问父页面的全局window对象，并从而调用了父页面中的parentMethod方法。

2. 使用postMessage

除了使用window.parent属性调用父页面的JavaScript方法外，还可以使用HTML5提供的postMessage方法来进行跨页面通信。

父页面示例代码：

<!-- 父页面 -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <iframe src="iframe.html" id="myIframe"></iframe>
    <script>
        window.addEventListener("message", function(event) {
            if (event.data === "callParentMethod") {
                parentMethod();
            }
        }, false);

        function parentMethod() {
            console.log("这是父页面的方法");
        }
    </script>
</body>
</html>

iframe.html示例代码：

<!-- iframe.html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <button onclick="callParentMethod()">调用父页面方法</button>
    <script>
        function callParentMethod() {
            // 向父页面发送消息
            window.parent.postMessage("callParentMethod", "*");
        }
    </script>
</body>
</html>

在上述示例中，我们首先在父页面中使用window.addEventListener方法监听message事件。当收到来自iframe.html页面的callParentMethod消息时，就调用parentMethod方法。

在iframe.html中，点击按钮后触发了callParentMethod()方法，该方法使用window.parent.postMessage向父页面发送一条消息，包含了要调用的方法信息。

使用postMessage方法的好处是可以实现更加灵活的跨页面通信，可以传递任意类型的数据，而不仅限于调用一个方法。