子页面使用父页面的方法

最新推荐文章于 2024-09-09 15:37:01 发布

小俞不多余

最新推荐文章于 2024-09-09 15:37:01 发布

阅读量1.7k

点赞数 3

文章标签：数学建模 javascript 开发语言

本文链接：https://blog.csdn.net/mkmmkkghhhhhhhh/article/details/131370510

版权

一个场景，在子页面需要调用父页面的方法时，查了很多很多现有的方法，在子页面直接调用父页面的方法这种会有一些跨页面的问题，所以对于这个方法我进行优化。

下面我先介绍第一种方法，子页面直接调用父页面的方法。

父页面

在父页面中，我定义了一个事件处理函数 parentEvent()，当触发时会弹出一个提示框。

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <script>
        function parentEvent() {
            alert("Parent event triggered!");
        }
    </script>
</head>
<body>
    <h1>Parent Page</h1>
    <iframe src="child.html"></iframe>
</body>
</html>

子页面：

子页面通过获取父页面的 window 对象，以及通过 contentWindow 属性来访问父页面中的方法或属性。然后，使用得到的对象来触发父页面的事件。

<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="triggerParentEvent()">Trigger Parent Event</button>

    <script>
        function triggerParentEvent() {
            const parentWindow = window.parent;
            parentWindow.contentWindow.parentEvent();
        }
    </script>
</body>
</html>

在上述代码中，我们在子页面中定义了一个函数 triggerParentEvent()，该函数通过 window.parent 获取父页面的 window 对象，并使用 contentWindow 属性访问父页面中的方法。然后，我们调用 parentEvent() 方法来触发父页面的事件。

需要注意的是，由于同源策略的限制，子页面只能访问同源的父页面。否则，因为安全策略的限制，可能无法调用父页面的方法。因此这个方法有一定的局限性。

下面我们介绍一个万能的方法：

父页面：

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <script>
        function parentEvent() {
            alert("Parent event triggered!");
        }

        // 监听消息
        window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event) {
            if (event.data === "triggerParentEvent") {
                parentEvent(); // 触发父页面事件
            }
        }
    </script>
</head>
<body>
    <h1>Parent Page</h1>
    <iframe src="child.html"></iframe>
</body>
</html>

子页面：

<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>
    <button onclick="triggerParentEvent()">Trigger Parent Event</button>

    <script>
        function triggerParentEvent() {
            const parentWindow = window.parent;
            parentWindow.postMessage("triggerParentEvent", "*"); // 发送消息
        }
    </script>
</body>
</html>

在上述代码中，我们通过 postMessage() 方法发送一个消息给父页面。在父页面中，我们使用 addEventListener() 方法监听消息事件，并在接收到特定消息时触发父页面的事件。

这样，子页面点击按钮时会发送一个消息给父页面，父页面接收到消息后触发相应的事件。

请注意，由于我们在 postMessage() 方法中指定了通配符 "*"，这意味着消息可以跨域发送。如果你需要更精确地控制消息的接收范围，可以将 "*" 替换为目标页面的具体域名。

相当于给父页面的根节点添加消息监听事件，子页面发送信息的时候，就触发相对应的事件。