Question

发现当您使用Google地图作为iframe重新打开fancybox时 - iframe为空。请参阅演示here

或示例

<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 :(

Answer 1

感谢JFK为link提供答案

问题：在fancybox v1.3.2 +内联内容被“移动”到了   改为使用fancybox和（隐藏的）临时容器。问题   当您将iframes标记作为内联内容时，就会发生这种情况。你第一次   fire fancybox，iframe（标签）被移动到fancybox但是一旦你   关闭fancybox，“移动”的iframe（标签）移回其中   文档中的原始位置，它失去了src的值   属性并获取值“约：空白”，因此第二个   时间fancybox被触发它只显示一个空（空白）框。

解决方法：在iframe时缓存src属性的值   （标记）移动到fancybox然后将此值恢复为   关闭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

Answer 2

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

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

并且在加载的模态

上完成克隆项目/ iframe等

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

这确实意味着你将复制页面上的项目并且在模态打开时有2个实例，一旦关闭它将在不同的隐藏div中开始。

来自fancybox的谷歌地图的空iframe重新打开？

2 个答案: