jquery iframe调用父页面方法

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。iframe 是 HTML 中的一个元素，用于在当前页面中嵌入另一个 HTML 页面。

类型

内联框架：直接在 HTML 中使用 <iframe> 标签嵌入页面。
动态创建：通过 JavaScript 动态创建 <iframe> 元素并插入到页面中。

应用场景

嵌入第三方内容：如地图、视频、社交媒体插件等。
模块化页面设计：将页面分割成多个独立的模块，通过 iframe 进行加载和管理。
跨域通信：虽然 iframe 本身存在跨域限制，但可以通过一些技巧实现跨域通信。

问题与解决方案

问题：jQuery iframe 调用父页面方法

在 iframe 中调用父页面的方法，通常会遇到跨域问题。如果 iframe 和父页面在同一个域下，可以直接调用父页面的方法。

示例代码

父页面 (parent.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <iframe id="myIframe" src="iframe.html"></iframe>
    <script>
        $(document).ready(function() {
            window.myFunction = function() {
                alert('Method called from iframe!');
            };
        });
    </script>
</body>
</html>

子页面 (iframe.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="callParent">Call Parent Method</button>
    <script>
        $(document).ready(function() {
            $('#callParent').click(function() {
                window.parent.myFunction();
            });
        });
    </script>
</body>
</html>

原因与解决方法

原因：

如果 iframe 和父页面不在同一个域下，浏览器的同源策略会阻止跨域访问。

解决方法：

CORS：如果服务器支持 CORS（跨域资源共享），可以在服务器端设置相应的响应头，允许跨域访问。
PostMessage：使用 HTML5 的 postMessage API 进行跨域通信。

示例代码（使用 PostMessage）：

父页面 (parent.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <iframe id="myIframe" src="iframe.html"></iframe>
    <script>
        $(document).ready(function() {
            window.addEventListener('message', function(event) {
                if (event.origin !== 'http://example.com') return; // 检查来源
                alert('Method called from iframe!');
            });
        });
    </script>
</body>
</html>

子页面 (iframe.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="callParent">Call Parent Method</button>
    <script>
        $(document).ready(function() {
            $('#callParent').click(function() {
                window.parent.postMessage('callMyFunction', 'http://example.com');
            });
        });
    </script>
</body>
</html>

通过上述方法，可以在 iframe 中安全地调用父页面的方法，即使它们不在同一个域下。