jquery父页面调用子页面方法

基础概念

在前端开发中，父页面与子页面之间的通信是一个常见的需求。jQuery 提供了多种方法来实现这种通信，其中一种常见的方法是使用 iframe 和 postMessage API。

类型

父页面调用子页面方法：父页面通过 postMessage 向子页面发送消息，子页面监听消息并执行相应的方法。
子页面调用父页面方法：子页面通过 postMessage 向父页面发送消息，父页面监听消息并执行相应的方法。

应用场景

跨域通信：当父页面和子页面位于不同的域名下时，可以使用 postMessage 进行通信。
模块化开发：将页面拆分为多个独立的模块（子页面），通过 postMessage 进行通信，提高代码的可维护性和复用性。

示例代码

父页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <iframe id="childFrame" src="child.html"></iframe>
    <button id="callChildMethod">调用子页面方法</button>

    <script>
        $(document).ready(function() {
            $('#callChildMethod').click(function() {
                var iframe = document.getElementById('childFrame');
                iframe.contentWindow.postMessage('callChildMethod', '*');
            });

            window.addEventListener('message', function(event) {
                if (event.data === 'childMethodResult') {
                    console.log('子页面方法执行结果');
                }
            });
        });
    </script>
</body>
</html>

子页面代码（child.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        window.addEventListener('message', function(event) {
            if (event.data === 'callChildMethod') {
                console.log('父页面调用子页面方法');
                // 执行子页面方法
                var result = '子页面方法执行结果';
                event.source.postMessage(result, event.origin);
            }
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：子页面方法未被调用

原因：

消息格式不正确：父页面发送的消息格式与子页面监听的消息格式不匹配。
消息来源不正确：子页面未正确验证消息来源，导致安全问题。
跨域问题：父页面和子页面位于不同的域名下，未正确处理跨域通信。

解决方法：

确保父页面发送的消息格式与子页面监听的消息格式一致。
在子页面中验证消息来源，确保消息来自可信的源。
使用 postMessage API 处理跨域通信，确保 targetOrigin 参数设置正确。

// 父页面发送消息
iframe.contentWindow.postMessage('callChildMethod', 'https://example.com');

// 子页面监听消息
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://example.com') return; // 验证消息来源
    if (event.data === 'callChildMethod') {
        // 执行子页面方法
        var result = '子页面方法执行结果';
        event.source.postMessage(result, event.origin);
    }
});

通过以上方法，可以确保父页面能够正确调用子页面的方法，并且保证通信的安全性和可靠性。