jquery iframe调用子页面方法

<!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="childFrame" src="child.html"></iframe>
    <button id="callChildMethod">Call Child Method</button>

    <script>
        $(document).ready(function() {
            $('#callChildMethod').click(function() {
                var iframe = document.getElementById('childFrame');
                var iframeWindow = iframe.contentWindow;
                if (iframeWindow && typeof iframeWindow.childMethod === 'function') {
                    iframeWindow.childMethod();
                } else {
                    console.error('Child method not found');
                }
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Child Page</h1>

    <script>
        function childMethod() {
            alert('Child method called!');
        }
    </script>
</body>
</html>

$('#childFrame').on('load', function() {
    var iframe = document.getElementById('childFrame');
    var iframeWindow = iframe.contentWindow;
    if (iframeWindow && typeof iframeWindow.childMethod === 'function') {
        iframeWindow.childMethod();
    } else {
        console.error('Child method not found');
    }
});