在灯箱点击之前不要加载 iFrame Google 地图

Posted 2023-05-09

【中文标题】在灯箱点击之前不要加载 iFrame Google 地图

【英文标题】：Do Not Load iFrame Google Map Until Lightbox Click

【发布时间】：2014-06-12 16:47:04

【问题描述】：

我正在使用 Google Maps iFrame Embed 将一些地图嵌入到页面中。这些地图被加载到一个页面中，并在点击时显示在一个灯箱中（以及其他信息）。是否可以不加载 iFrame 内容直到灯箱链接实际被点击？

当可能只需要一两个地图时，我不想加载 10 多张地图。

这可能吗？

我使用 Fancybox 2 作为灯箱和 jQuery 2.1。

我曾考虑使用 jQuery 在点击时注入 iFrame 代码，但我不确定最佳方法。

【参考方案1】：

可能有不同的方式，1种可能：

将src 存储在iframe 的另一个属性中（例如data-src）并在灯箱打开时分配src：

$(".selector").fancybox(
    afterLoad:function()
        this.content.find('iframe')
       .each(function(i,f) 
          f=$(f);
          if(!f.attr('src')) 
             f.attr('src',f.data('src'));
           
        );               
    
);

【讨论】：

效果很好。谢谢。我确实在 Firebug 中看到了这个错误：...e(d)catch(k)e(1,k);returnb(a)else e(0,null);c[gb]("GET",a,!0);c.send(null)... init_embed.js (line 28) - 我不确定它是在我的页面上还是在 Google 地图上？它似乎不会对页面本身造成任何问题。

这个错误是google强制的（我猜是试图访问父文档）