Search code examples
jquerygoogle-mapsiframefancybox

Empty Iframe from google maps on fancybox reopen?

Found that when you reopen fancybox with Google maps as iframe - iframe is empty. See demo here

or example

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

and init link 

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

for link 

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

On second opening - google returns empty iframe :(

Solution

  • Thanks JFK for the link with the answer

    the issue: in fancybox v1.3.2+ inline content is "moved" into the fancybox and a (hidden) temp container is left instead. the issue occurs when you have iframes tags as inline content. first time you fire fancybox, the iframe (tag) is moved into fancybox but once you close the fancybox, the "moved" iframe (tag) moves back to its original position in the document and it looses the value of its src attribute and gets a value of "about:blank" hence that the second time fancybox is fired it just displays an empty (blank) box.

    the workaround: Cache the value of the src attribute while the iframe (tag) is moved into the fancybox then restore this value to the iframe tag once fancybox is closed

    so your script should look like: 

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

    NOTE : this is for fancybox v1.3.4 only