0

这是用于从远程域加载外部页面的父页面的代码，但是当我单击 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>
4

2 回答 2

0

你的代码对我有用，但是在使用 iframe 时你应该考虑同源策略。

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

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

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

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

于 2012-07-08T10:59:51.900 回答
0

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

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

于 2012-07-08T09:28:07.153 回答