在 featherlight.js 中延迟加载 iFrame答案

【问题标题】：Lazy load iFrame in featherlight.js在 featherlight.js 中延迟加载 iFrame
【发布时间】：2015-02-21 02:20:17
【问题描述】：

我想知道是否有一种方法可以在运行时在 featherlight.js 中延迟加载 iFrame，而不是在 html 中声明 iFrame？这样，页面中要加载的 url 可以简单地通过 data 属性或 href 属性指定，而不是使用 iFrame 声明。例如，不要像这样在我的 html 文件中声明 iFrame：

<a class="btn btn-default" href="#" data-featherlight="#fl3">iFrame</a>
 ....
<iframe class="lightbox" src="www.google.com" id="fl3" style="border:none;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" height="281" width="500"></iframe>

我想做这样的事情：

<a href="#" data-featherlight="www.xyz.com"></a>

我确实意识到，如果将上面的 URL 替换为以 .html 结尾的内容，它可以正常工作。我正在考虑为“外部”站点/内容编写另一个内容过滤器..类似于以下内容：

external: { 
            regex: /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/,
            process: function(url) {

                var self = this,

                var $container = $("<iframe id='featherlight-iframe'/>");
                $container.attr('src', url);
                    ........


            }

        },

不确定这是否是正确的方法。任何帮助将不胜感激。

提前谢谢你。

【问题讨论】：

标签： javascript jquery html iframe featherlight.js

【解决方案1】：

添加内容过滤器是一个不错的方法。

事实证明，正确地做到这一点有点困难（至少，如果想避免两次加载内容），所以我添加了feature in Featherlight v1.2。

【讨论】：

太棒了！感谢 1.2 :-) 非常感谢！