延迟加载featherlight.js中的iFrame

时间:2015-02-17 21:13:21

标签: javascript jquery html iframe featherlight.js

我想知道是否有一种方法可以在运行时延迟加载featherlight.js中的iFrame而不是在html中声明iFrame?这样,可以通过data属性或href属性简单地指定要在页面中加载的url,而不是使其具有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>

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

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);
                    ........


            }

        },

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

提前谢谢。

1 个答案:

答案 0 :(得分:1)

添加内容过滤器是一种很好的方法。

事实证明这样做有点困难(至少,如果有人想避免加载内容两次),所以我添加了feature in Featherlight v1.2