Question

这是父页面的代码，用于从远程域加载外部页面，但是当我点击iframe页面中的关闭链接时，它不会被关闭。任何人都可以指导我，我哪里错了？

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Add jQuery library -->
    <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.0.6"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.0.6" media="screen" />

    <script type="text/javascript">
        $(document).ready(function() {

            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'http://2792.a.hostable.me/testing/instagram/tester.php',
                    type : 'iframe',
                    padding : 5 
                });
            });

        });
    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
    </style>
</head>
<body>
<a id="fancybox-manual-b" href="javascript:;">Open single item, custom options</a>
</body>
</html>

远程页面中的代码如下

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox - iframe demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>fancyBox - iframe demo</h1>

    <p>
<a href="javascript:parent.$.fancybox.close();">Close me</a>

        |

        <a href="javascript:parent.document.returnval('asdf');">return some value</a>
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque justo ac eros consectetur bibendum. In hac habitasse platea dictumst. Nulla aliquam turpis et tellus elementum luctus. Duis sit amet rhoncus velit. Duis nisl ligula, mattis interdum blandit laoreet, mattis id ante. Cras pulvinar lacus vitae nisi egestas non euismod neque bibendum. Vestibulum faucibus libero id ante molestie ultricies. Vestibulum quis nibh felis. Vestibulum libero nisl, vehicula vel ullamcorper sit amet, tristique sit amet augue. Etiam urna neque, porttitor sed sodales lacinia, posuere a nisl. Vestibulum blandit neque in sapien volutpat ac condimentum sapien auctor. Ut imperdiet venenatis ultricies. Phasellus accumsan, sem eu placerat commodo, felis purus commodo ipsum, sit amet vulputate orci est viverra est.
    </p>

    <p>
        Aenean velit est, condimentum ut iaculis ut, accumsan at mi. Maecenas velit mi, venenatis ut condimentum at, ultrices vel tortor. Curabitur pharetra ornare dapibus. Ut volutpat cursus semper. In hac habitasse platea dictumst. Donec eu iaculis ipsum. Morbi eu dolor velit, a semper nunc.
    </p>
</body>
</html>

Answer 1

您正在打开的页面也需要fancybox JS引用，否则它将无法识别试图关闭自己的代码。

如果您使用的是现代浏览器，则应该可以访问控制台（通常是F12会打开它），这应该显示任何JS错误。

Answer 2

您的代码适合我，但在使用iframe时您应该考虑Same Origin Policy。

当您尝试关闭该页面时，会触发此错误

Timestamp: 08/07/2012 3:50:25 AM
Error: Permission denied to access property '$'
Source File: javascript:parent.$.fancybox.close();
Line: 1

这意味着它可能存在对该主机的限制，以执行来自不同域的脚本。

如果您在本地测试或两个页面存在于同一服务器（同一个域）上，那么它将无缝地工作。

为什么即使我的页面有代码要关闭，fancybox也不会关闭

2 个答案: