How to close iframe from inside iframe?

To close an iframe from within it, you can use JavaScript. Typically, you define a function on the parent page to remove the iframe, and then call this function from within the iframe. However, this approach requires adherence to the same-origin policy, meaning the iframe's content and the parent page must share the same origin to directly interact with scripts.

Here is one implementation:

Parent Page Code Example:

html
<!DOCTYPE html>
<html>
<head>
<title>Parent Page</title>
<script>
// Define a function on the parent page to remove the iframe
function closeIframe() {
    var iframe = document.getElementById('myIframe');
    if (iframe) {
        iframe.parentNode.removeChild(iframe);
    }
}
</script>
</head>
<body>

<iframe id="myIframe" src="iframe_content.html" width="300" height="200">
</iframe>

</body>
</html>

iframe Internal Page Code Example:

html
<!DOCTYPE html>
<html>
<head>
<title>iframe Internal Page</title>
<script>
// Call the parent page's closeIframe function to close the iframe from within it
function closeMe() {
    // Verify the parent page exists and the closeIframe function is defined
    if (window.parent && typeof window.parent.closeIframe === 'function') {
        window.parent.closeIframe();
    }
}
</script>
</head>
<body>

<button onclick="closeMe()">Close this iframe</button>

</body>
</html>

In this example, the page within the iframe contains a button that, when clicked, invokes the closeMe function. This function checks if the parent page exists and if the closeIframe function is defined on it. If both conditions are satisfied, it triggers the closeIframe function on the parent page to remove the iframe.

If the iframe and the parent page originate from different origins, consider using the window.postMessage method for cross-origin communication. The parent page and the iframe can achieve similar functionality by exchanging messages.

Note that this operation may be constrained by browser security policies. If cross-origin issues arise, additional steps may be necessary to enable cross-origin communication.

2024年6月29日 12:07 回复

1个答案

你的答案