How to get a reference to an iframe's window object inside iframe's onload handler created from parent window

在网页开发中，通常可能需要在父窗口中处理或操作一个由父窗口创建的iframe。为了在父窗口的JavaScript代码中访问iframe的窗口对象，可以遵循以下步骤：

确保iframe已经加载完成：在尝试访问iframe的内容或者功能之前，必须确保iframe已经完全加载了其内容。这可以通过监听iframe的load事件来实现。
使用contentWindow属性获取引用：可以通过iframe元素的contentWindow属性来获取iframe的window对象的引用。这个属性返回的是一个指向iframe内容的window对象的引用。

下面是一个具体的例子，说明如何在父窗口中获取对从父窗口创建的iframe窗口对象的引用，并在iframe加载完成后调用其内部的方法：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent Window</title>
</head>
<body>
    <iframe id="myIframe" src="iframe.html" onload="iframeLoaded()"></iframe>
    <script>
        function iframeLoaded() {
            var iframeWindow = document.getElementById('myIframe').contentWindow;

            // 现在可以访问 iframe 中的 window 对象
            iframeWindow.someFunctionInsideIframe(); // 假设iframe有一个名为someFunctionInsideIframe的函数
        }
    </script>
</body>
</html>

在这个例子中，我们创建了一个iframe元素，并为其设置了一个load事件的监听器函数iframeLoaded。一旦iframe加载完毕，iframeLoaded函数将被执行。在该函数内部，我们通过获取iframe元素的contentWindow属性来访问iframe的窗口对象，并调用iframe内部定义的someFunctionInsideIframe函数。

需要注意的是，如果iframe和父窗口不是同源的（即协议、域名或端口任一不相同），那么出于安全原因，浏览器的同源策略会阻止父窗口访问iframe的内容。在这种情况下，尝试访问contentWindow属性会抛出安全错误。

2024年8月13日 10:48 回复

1个答案

你的答案