jquery 调用iframe中的函数

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。iframe 是一个内嵌的网页容器，允许你在当前页面中嵌入另一个 HTML 页面。

类型

jQuery 调用 iframe 中的函数主要有两种方式：

通过 window.frames 访问 iframe 内容
通过 document.getElementById 或其他选择器访问 iframe 内容

应用场景

当你需要在主页面中调用 iframe 中定义的函数时，可以使用 jQuery 来实现。例如，你可能有一个包含复杂表单验证的 iframe，需要在主页面中触发这些验证逻辑。

示例代码

假设你有一个 iframe，其 ID 为 myIframe，并且 iframe 中有一个函数 validateForm：

<!-- 主页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <iframe id="myIframe" src="iframe.html"></iframe>
    <button id="validateBtn">Validate Form</button>

    <script>
        $(document).ready(function() {
            $('#validateBtn').click(function() {
                // 获取 iframe 的 window 对象
                var iframeWindow = $('#myIframe')[0].contentWindow;
                // 调用 iframe 中的函数
                iframeWindow.validateForm();
            });
        });
    </script>
</body>
</html>

<!-- iframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Page</title>
</head>
<body>
    <form id="myForm">
        <!-- 表单内容 -->
    </form>

    <script>
        function validateForm() {
            // 表单验证逻辑
            console.log('Form validated!');
        }
    </script>
</body>
</html>