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

这是用于从远程域加载外部页面的父页面代码，但是当我点击关闭链接iframe页面没有关闭。任何人都可以引导我，我哪里错了？为什么即使我的页面有代码关闭，fancybox也没有关闭

<!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>

来源

2012-07-08 user1026137

http://meta.stackexchange.com/a/5235/173947 – JFK 2012-07-08 10:29:16

您要打开的页面也将需要的fancybox JS引用否则将不能够认识到，试图关闭代码本身。

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

来源

2012-07-08 09:28:07 Digbyswift

这不一定是真的;实际上打开的页面可能只有'close me'，而且它仍然会关闭fancybox。 – JFK 2012-07-08 10:36:24

但它不适用于我的shopify页面 – user1026137 2012-07-08 10:49:16

我在Chrome浏览器的控制台中获得了以下错误报告， – user1026137 2012-07-08 11:04:09

您的代码适用于我，但在处理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

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

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

来源

2012-07-08 10:59:51 JFK

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

回答

相关问题