从 iframe 调用父级中的 Fancybox答案

【问题标题】：call Fancybox in parent from iframe从 iframe 调用父级中的 Fancybox
【发布时间】：2012-02-09 20:13:36
【问题描述】：

我有 2 个页面，我的 index.html 和 social.html。我清理了我的索引，只留下了fancybox所需的jquery代码我想做的是在social.html中放置图像，当点击它时，它会打开fancybox并显示它，但在index.html中不在里面内嵌框架。出现的错误是：

Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
  onclick

这是我的 index.html：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
        function showImage(image) {
            $.fancybox('<img src="img/' + image + '" alt="" border="0" />');
        };
</script>

</head>

<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>

在 IFrame 页面中：

 <img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>

PS：两个页面都在同一个域上... 编辑：video.js ->这是来自fancybox，我没有做这个。

jQuery(document).ready(function() {

    $(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : 640,
            'height'        : 385,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
            }
        });

        return false;
    });



});

【问题讨论】：

这就是我的想法，但事实并非如此，它一直给我这个错误：S
js/video.js 里面有什么。如果这个 js 有任何错误，那么浏览器 JS 引擎将不会解析 showImage 函数。只有在这种情况下，它才会抛出这个错误。
我刚刚添加了 video.js 代码，但那是直接来自 fancybox 我没有改变任何东西。
在控制台中页面加载时是否看到任何 JS 错误？

标签： jquery html iframe fancybox

【解决方案1】：

首先，您应该使用 fancybox v2.x 无缝地做到这一点（修补 fancybox v1.3.x 并不值得）

其次，你需要在两个页面，父页面和iframed页面中，加载jquery和fancybox的css和js文件，才能正确的超越fancybox，

所以在这两个页面中，您至少应该有类似的内容：

<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />

和

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

然后在您的 iframed（子）页面中，您的脚本基本上是相同的（但对于 v2.x 具有正确的 fancybox 选项...check the documentation here）

$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            // more options (v2.x) etc

但不是这个

        $.fancybox({

这样做：

        parent.$.fancybox({

然后fancybox会显示在iframe页面边界之外的父页面中

更新：Demo page here

【讨论】：

我累了，下载最新版本的一切。如果我只放 $('.fancybox').fancybox(); 在单页（iframe）上它有效，但后来我把 parent.$.('.fancybox').fancybox();它说意外的令牌，如果我把 parent.$('.fancybox').fancybox();它给出了相同的 DOM 错误：S
好吧，如果你累了，那么我们无能为力（所以我想知道你为什么要寻求帮助）......但如果你没有意识到一切的“最新版本”意味着改进您正在使用的软件并修复现有错误。我们不是给你命令，我们是给你解决问题的想法......（y si no quieres, pues no y mucha suerte entonces）
我很抱歉这是一个错字我的意思是“我试过这个”我永远不会放下或不感谢所提供的帮助。我试图同时做几件事，我知道你花了你宝贵的时间给我帮助，不想让你悬而未决，不管它是否有效。当然，拥有最新的任何东西都会更好，因为大多数错误都被删除了，也没有问题。这一切只是一个错字:)
谢谢！！你知道我以前是怎么想的吗？我正在测试本地主机，就像现在我完全复制了你所拥有的但仍然无法工作，所以我上传并且它工作了！疯了吧？但是非常感谢！
parent.$.fancybox({ 在本地主机上不起作用。当我在实时服务器上保留相同的代码时它起作用了。

【解决方案2】：

我之前遇到过这个问题并且能够找到解决方案。这是iv所做的。在我的 iframe 页面中，我使用 href 调用了父窗口，例如 onClick="callMe('www.google.com')" 或者如果图片“/images/pics.png” 并在我的父页面中调用此脚本

<script type="text/javascript"> 
 function callMe(site){ 
      $(".sample").fancybox({ 
         'width' : '97%', 
         'height' : '97%', 
         'href' : ''+site+'' //force href to change its site from the call function in the iframe page 
      }); 
      readyFancy() call to trigger the decoy link page 
 } 

 function readyFancy(){ 
      $("a.sample").trigger("click"); 
 } 
 </script>

在我的父 html 中，我们设置了一个诱饵链接（这个来自加载 fancybox 的示例）

<body> 
<a href="#" class="sample"></a> 
</body>

您可以在此处下载一个工作示例。 https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

【讨论】：

值得一提的是，您的解决方案适用于fancybox v1.3.4，对不想升级的人很有帮助。使用我提出的使用 v2.x 的解决方案，优点是您不需要修改原始的 fancybox 文件，并且您的脚本仍然可以与 fancybox 的未来升级一起使用。
@JFK...谢谢 JFK 我没有意识到您已经将它包含在升级中。无论如何，非常感谢你给我们fancybox。
我没有开发 Fancybox ... Janis 是那个人 stackoverflow.com/users/486595/janis
为什么还要使用诱饵链接？如果你看过 Fancybox 提供的例子，就像你说的那样。如何查看我的答案。

【解决方案3】：

由于 img 位于 iframe 上，因此是不同的网页。所以 Jquery 在 index.html 上，但 img 不在，这就是 JQuery 无法获取图像的原因。

也许使用这样的东西......但我不认为它会工作

关于 index.html 脚本部分

$(document).ready(function () {
    //function to active fancybox on the thumbs class inside the iframe
    //Not sure it works on iframes, probably it doesnt.
    $("#iframeID.thumbs").fancybox();
});

并将 id 添加到 iframe 声明中

但是，我的建议是使用 div 而不是 iframe。您还应该从图像中删除 onclick 以获取非干扰 Javascript。

查看教程：http://fancybox.net/howto 如果你想要一个类似的西班牙语教程，你也可以查看我的网站。

【讨论】：

【解决方案4】：

您不需要从 fancybox v1.3.x 升级，您的 iframe 页面中也不需要 fancybox。

iframe：

<a href="#" class="fancylink" data-url="www.example.com">Some link</a>

$('.fancylink').click(function() {
    var url = $(this).attr("data-url");
    parent.show_fancybox(url);
});

家长：

function show_fancybox(url) {
    $.fancybox({
        'type'          : 'iframe',     
        'width'         : 640,
        'height'        : 480,
        'href'          : url       
    });
}

【讨论】：