How to Call parent Javascript function from inside an iframe

In web development, it is often necessary to call JavaScript functions located on the parent page from within an iframe. This requirement can be addressed through several methods, but it is important to note that for security reasons, most modern browsers impose strict restrictions on cross-origin scripts. If the iframe and parent page are not same-origin (i.e., the protocol, domain, and port are not identical), these methods may not apply.

Methods Under the Same-Origin Policy

If the iframe and parent page are same-origin, you can use the parent keyword to call JavaScript functions on the parent page. Here is an example:

Assume the parent page (parent.html) contains a function called 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>

The child page (child.html) needs to call this function:

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>

In this example, when you click the button on the child page, it calls the parent.displayMessage() function to invoke the displayMessage function defined on the parent page, and displays an alert dialog containing the message.

Methods Under Cross-Origin Policy

If the iframe and parent page are not same-origin, more complex methods such as window.postMessage are required to securely communicate. This method allows cross-origin communication but requires additional event listeners and message validation on both pages to ensure security.

html
// Parent page code
window.addEventListener("message", (event) => {
    if (event.origin !== "http://trusted-source.com") {
        return; // Ensure the message comes from a trusted domain
    }
    if (event.data === "callFunction") {
        displayMessage("Called from iframe!");
    }
});

// iframe page code
function sendMessage() {
    parent.postMessage("callFunction", "http://parent-domain.com");
}

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

In this cross-origin example, the child page sends a message to the parent page using postMessage, and the parent page listens for the message event, executing the corresponding function after verifying the message source is trusted.

Conclusion

The choice of method depends on your specific requirements, especially considering security and cross-origin issues. For same-origin pages, using the parent object is a straightforward approach. For scenarios requiring cross-origin communication, window.postMessage provides a secure and flexible solution.

2024年7月17日 16:04 回复

1个答案

Methods Under the Same-Origin Policy

Methods Under Cross-Origin Policy

Conclusion

你的答案