iframe 引用父页面js

基础概念

iframe 是 HTML 中的一个元素，用于在当前网页中嵌入另一个 HTML 文档。通过 iframe，可以在一个页面中加载另一个页面，从而实现页面内容的嵌套显示。iframe 中的内容是独立于父页面的，但可以通过 JavaScript 进行交互。

类型与应用场景

类型

同源 iframe：iframe 中的内容与父页面同源（协议、域名、端口相同），可以直接访问和操作。
跨域 iframe：iframe 中的内容与父页面不同源，需要通过特定的方法进行通信。

应用场景

嵌入第三方内容：如嵌入地图、视频播放器等。
单页应用（SPA）：将不同页面作为 iframe 嵌入主页面，实现单页应用的导航效果。
沙箱环境：用于运行不受信任的代码，防止其对主页面造成影响。

遇到的问题及解决方法

问题：如何在 `iframe` 中引用父页面的 JavaScript？

在 iframe 中引用父页面的 JavaScript 主要通过 window.parent 对象来实现。以下是一些常见的操作：

示例代码

父页面（parent.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script>
        function sayHello() {
            alert('Hello from parent!');
        }
    </script>
</head>
<body>
    <iframe src="child.html" width="600" height="400"></iframe>
</body>
</html>

子页面（child.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
    <script>
        function callParentFunction() {
            window.parent.sayHello();
        }
    </script>
</head>
<body>
    <button onclick="callParentFunction()">Call Parent Function</button>
</body>
</html>

在这个例子中，child.html 中的按钮点击事件会调用 parent.html 中定义的 sayHello 函数。

跨域问题及解决方法

如果 iframe 中的内容与父页面不同源，直接访问 window.parent 会受到同源策略的限制，导致报错。可以通过 postMessage API 实现安全的跨域通信。

父页面（parent.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script>
        window.addEventListener('message', function(event) {
            if (event.origin !== 'http://example.com') return; // 检查来源
            alert('Message received from child: ' + event.data);
        });

        function sendMessageToChild() {
            document.getElementById('childFrame').contentWindow.postMessage('Hello from parent!', 'http://example.com');
        }
    </script>
</head>
<body>
    <iframe id="childFrame" src="http://example.com/child.html" width="600" height="400"></iframe>
    <button onclick="sendMessageToChild()">Send Message to Child</button>
</body>
</html>

子页面（child.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
    <script>
        window.addEventListener('message', function(event) {
            if (event.origin !== 'http://parent.com') return; // 检查来源
            alert('Message received from parent: ' + event.data);
        });

        function sendMessageToParent() {
            window.parent.postMessage('Hello from child!', 'http://parent.com');
        }
    </script>
</head>
<body>
    <button onclick="sendMessageToParent()">Send Message to Parent</button>
</body>
</html>

通过 postMessage API，可以在不同源的情况下安全地进行通信，避免了同源策略的限制。