jquery 子页面传值到父页面

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 Web 开发中，经常需要在子页面和父页面之间传递数据。

优势

简化 DOM 操作：jQuery 提供了简洁的语法来操作 DOM 元素。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得代码在不同浏览器中都能正常运行。
丰富的插件支持：jQuery 有大量的插件库，可以方便地实现各种功能。

类型

通过 URL 参数传递：将数据作为 URL 参数附加到子页面的 URL 上。
通过表单提交传递：使用表单提交的方式将数据从子页面传递到父页面。
通过 JavaScript 传递：使用 JavaScript 在子页面和父页面之间传递数据。

应用场景

当需要在子页面和父页面之间共享数据时，可以使用 jQuery 进行数据传递。例如，在一个复杂的 Web 应用中，用户在一个子页面填写了一些信息，然后需要将这些信息传递回父页面进行进一步处理。

示例代码

通过 URL 参数传递

子页面 (child.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>
    <input type="text" id="data" placeholder="Enter data">
    <button id="submit">Submit</button>

    <script>
        $(document).ready(function() {
            $('#submit').click(function() {
                var data = $('#data').val();
                window.location.href = 'parent.html?data=' + encodeURIComponent(data);
            });
        });
    </script>
</body>
</html>

父页面 (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>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            var urlParams = new URLSearchParams(window.location.search);
            var data = urlParams.get('data');
            if (data) {
                $('#result').text('Received data: ' + decodeURIComponent(data));
            }
        });
    </script>
</body>
</html>

通过 JavaScript 传递

子页面 (child.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>
    <input type="text" id="data" placeholder="Enter data">
    <button id="submit">Submit</button>

    <script>
        $(document).ready(function() {
            $('#submit').click(function() {
                var data = $('#data').val();
                window.opener.postMessage(data, '*');
                window.close();
            });
        });
    </script>
</body>
</html>

父页面 (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>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            window.addEventListener('message', function(event) {
                if (event.origin !== 'http://example.com') return; // 确保消息来源安全
                var data = event.data;
                $('#result').text('Received data: ' + data);
            });
        });
    </script>
</body>
</html>