iframe 之间，通过 name 找到窗口对象实现方法互相调用

在网页开发中，<iframe> 元素用于嵌入另一个 HTML 页面。通过 window.name 属性可以标识一个窗口或 <iframe>，而 window.parent 或 window.frames 可以用来访问父窗口或其他 <iframe>。使用这些属性，可以在不同的 <iframe> 之间进行通信，包括调用定义在不同 <iframe> 中的方法。

下面是一个简单的示例，演示如何在一个 <iframe> 中调用另一个 <iframe> 中定义的函数：

假设结构如下：

主页面（main.html）包含两个 <iframe>，分别为 iframe1 和 iframe2。
在 iframe1 中定义了一个函数 sayHello()。
我们希望从 iframe2 调用 iframe1 中的 sayHello() 函数。

main.html (主页面)

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
</head>
<body>
    <h1>主页面</h1>
    <iframe src="iframe1.html" name="iframe1" id="iframe1"></iframe>
    <iframe src="iframe2.html" name="iframe2" id="iframe2"></iframe>

    <script>
        // 确保所有iframe都加载完毕后再执行脚本
        window.onload = function() {
            var iframe2 = document.getElementById('iframe2').contentWindow;
            iframe2.callIframe1Function();
        };
    </script>
</body>
</html>

iframe1.html (第一个iframe)

<!DOCTYPE html>
<html>
<head>
    <title>Iframe 1</title>
</head>
<body>
    <h1>这是 iframe 1</h1>
    <script>
        function sayHello() {
            alert('Hello from iframe 1!');
        }
    </script>
</body>
</html>

iframe2.html (第二个iframe)

<!DOCTYPE html>
<html>
<head>
    <title>Iframe 2</title>
</head>
<body>
    <h1>这是 iframe 2</h1>
    <script>
        function callIframe1Function() {
            // 获取iframe1的窗口对象
            var iframe1 = parent.frames['iframe1'];
            // 调用iframe1中的sayHello函数
            iframe1.sayHello();
        }
    </script>
</body>
</html>

注意事项

跨域限制：如果 <iframe> 来自不同的源（协议、域名或端口不同），则会受到同源策略的限制，上述代码将无法正常工作。在这种情况下，可以考虑使用 postMessage 方法来进行跨域通信。
安全性：确保在调用其他 <iframe> 中的方法时，不会暴露敏感信息或造成安全风险。
兼容性：虽然现代浏览器普遍支持这些功能，但在开发时仍需检查目标浏览器的支持情况。

以上就是如何通过 <iframe> 的 name 属性找到对应的窗口对象，并调用其内部定义的方法的基本示例。

#前端开发分享于 2025-01-05