How to Call parent Javascript function from inside an iframe

在Web开发中，通常可能需要在一个iframe内部调用位于父页面中的JavaScript函数。这样的需求可以通过几种不同的方法来实现，但需要注意的是，出于安全考虑，大多数现代浏览器对跨域脚本有严格的限制。如果iframe和父页面不是同源的（即协议、域名和端口都相同），这些方法可能不适用。

同源策略下的方法

如果iframe和父页面是同源的，你可以使用parent关键字来调用父页面的JavaScript函数。这里有一个例子：

假设父页面（parent.html）中有一个函数叫做displayMessage：

html
<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <script>
        function displayMessage(msg) {
            alert("Message from iframe: " + msg);
        }
    </script>
</head>
<body>
    <h1>This is the parent page</h1>
    <iframe src="child.html"></iframe>
</body>
</html>

而子页面（child.html）需要调用这个函数：

html
<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
<body>
    <h1>This is the child iframe</h1>
    <button onclick="parent.displayMessage('Hello from the child iframe!')">Click Me!</button>
</body>
</html>

在这个例子中，当你点击子页面中的按钮时，会通过parent.displayMessage()调用父页面中定义的displayMessage函数，并弹出一个包含消息的对话框。

跨域策略下的方法

如果iframe和父页面不是同源的，则需要使用更复杂的方法如window.postMessage来安全地进行通信。这种方法允许跨域通信，但需要在两边的页面中都加入额外的事件监听和消息校验，以确保安全性。

html
// 父页面代码
window.addEventListener("message", (event) => {
    if (event.origin !== "http://trusted-source.com") {
        return; // 确保消息来自于可信域
    }
    if (event.data === "callFunction") {
        displayMessage("Called from iframe!");
    }
});

// iframe页面代码
function sendMessage() {
    parent.postMessage("callFunction", "http://parent-domain.com");
}

<button onclick="sendMessage()">Call Parent Function</button>

在这个跨域的例子中，子页面通过postMessage发送消息给父页面，父页面监听message事件并在确认消息来源是可信的后执行相应的函数。

结论

选择哪种方法取决于你的特定需求，尤其是考虑到安全性和跨域问题。对于同源页面，使用parent对象是一种简单直接的方法。而对于需要跨域通信的场景，window.postMessage提供了一种安全而灵活的解决方案。

2024年7月17日 16:04 回复

1个答案

同源策略下的方法

跨域策略下的方法

结论

你的答案