jquery layer打开一个跨域弹窗，在子页面关闭父页面

这篇文章距离上次修改已过196天，其中的内容可能已经有所变动。

在子页面关闭父页面的需求，如果子页面和父页面不同源（跨域），出于浏览器同源策略的限制，不能直接通过JavaScript代码关闭。但是，可以通过以下方法实现：

子页面向父页面发送消息，请求关闭。
父页面监听消息，并在收到请求时关闭自身。

以下是实现这一功能的示例代码：

父页面（http://parent.example.com）:




<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="openWindow">打开子页面</button>
    <script>
        $(document).ready(function(){
            $('#openWindow').click(function(){
                var myLayer = layer.open({
                    type: 2,
                    content: 'http://child.example.com',
                    area: ['800px', '600px']
                });
            });
            
            window.addEventListener('message', function(event) {
                if (event.data === 'close') {
                    window.close();
                }
            }, false);
        });
    </script>
</body>
</html>

子页面（http://child.example.com）:




<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
    <script>
        function closeParent() {
            if (window.opener && window.opener.postMessage) {
                window.opener.postMessage('close', 'http://parent.example.com');
            }
            window.close();
        }
    </script>
</head>
<body>
    <button onclick="closeParent()">关闭父页面</button>
</body>
</html>

在这个例子中，子页面通过调用window.opener.postMessage方法向父页面发送一个消息。父页面监听message事件，并在接收到'close'字符串时关闭自身。

请注意，这种方法依赖于父页面正确设置了window.addEventListener('message', ...)监听器，且子页面正确地指定了消息接收来源（'http://parent.example.com'）。同时，这种方法依赖于父页面和子页面同时被访问，且不会因为跨域限制而无法接收消息。

jquery layer打开一个跨域弹窗，在子页面关闭父页面

评论已关闭

推荐阅读