0

发现当您使用 Google 地图作为 iframe 重新打开 fancybox 时 - iframe 是空的。在此处查看演示

或示例

<div style="display:none;">
<div id="route-window" >
    <iframe id='i' width="650" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=.+%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0,+%D0%91%D0%B5%D1%80%D0%B5%D0%B6%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F+%D0%BD%D0%B0%D0%B1,+%D0%B4.+16+%D0%90,+%D1%81%D1%82%D1%80.+2&amp;hl=ru&amp;ie=UTF8&amp;sll=47.879165,13.837945&amp;sspn=0.112139,0.308647&amp;hnear=%D0%BD%D0%B0%D0%B1.+%D0%91%D0%B5%D1%80%D0%B5%D0%B6%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F,+16%D0%90,+%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0,+%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F,+121059&amp;t=m&amp;source=gplus-ogsb&amp;hq=&amp;ll=55.743734,37.565174&amp;spn=0.023191,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <br /><small><a href="https://maps.google.com/maps?q=.+%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0,+%D0%91%D0%B5%D1%80%D0%B5%D0%B6%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F+%D0%BD%D0%B0%D0%B1,+%D0%B4.+16+%D0%90,+%D1%81%D1%82%D1%80.+2&amp;hl=ru&amp;ie=UTF8&amp;sll=47.879165,13.837945&amp;sspn=0.112139,0.308647&amp;hnear=%D0%BD%D0%B0%D0%B1.+%D0%91%D0%B5%D1%80%D0%B5%D0%B6%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F,+16%D0%90,+%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0,+%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F,+121059&amp;t=m&amp;source=embed&amp;hq=&amp;ll=55.743734,37.565174&amp;spn=0.023191,0.054932&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">Просмотреть увеличенную карту</a></small>
</div>
</div>

和初始化链接

 $('#link]').fancybox();

链接

<a href="#route-window" id="link">

在第二次打开 - 谷歌返回空 iframe :(

4

2 回答 2

1

感谢肯尼迪提供与答案的链接

问题：在fancybox v1.3.2+ 中，内联内容被“移动”到了fancybox 中，而是留下了一个（隐藏的）临时容器。当您将 iframe 标记作为内联内容时，就会出现此问题。第一次触发fancybox时，iframe（标签）被移动到fancybox中，但是一旦你关闭fancybox，“移动”的iframe（标签）会移回文档中的原始位置，并且它会丢失其src属性的值并获取“about:blank”的值，因此第二次触发 fancybox 时，它只显示一个空（空白）框。

解决方法：在 iframe（标签）移动到 fancybox 时缓存 src 属性的值，然后在 fancybox 关闭后将此值恢复到 iframe 标签

所以你的脚本应该是这样的：

$(document).ready(function() {  
  var mySRC ="";  
  $("a.fancybox").fancybox({  
     'padding': 0,  
     // other API options etc  
     'onComplete': function() {  
         mySRC = $('#inlineParent iframe').attr('src');  
     },  
     'onClosed': function() { 
         $('#inlineParent iframe').attr('src',mySRC);  
     }  
  }); // fancybox
}); // ready

注意：这仅适用于 fancybox v1.3.4

于 2013-04-12T09:43:41.750 回答
0

另一种选择是在页面的某处放置一个空白的 div，即

<div style="display:none" id="fb"></div>

并有一个完整的克隆项目/ iframe等到那里加载模式

'onComplete': function() {
    $('#fb').append($(this.href).clone());
},

这确实意味着您将在页面上复制该项目并在模式打开时拥有 2 个实例，一旦关闭，它将位于与开始位置不同的隐藏 div 中。

于 2015-05-14T10:10:20.527 回答