如何重用fancybox3 iframe答案

【问题标题】：How to re-use fancybox3 iframe如何重用fancybox3 iframe
【发布时间】：2017-07-26 13:37:34
【问题描述】：

在使用 fancybox3 时，我们希望动态更改 iframe 的链接。所以我们更改了data-src 属性，该属性第一次运行良好。但是，当我们通过 jQuery 更改链接并再次打开 fancybox 时，它会打开旧的data-src。你怎么能重复使用花哨的盒子或销毁并重新创建花哨的盒子 ?

<a class="inre-product--book" data-fancybox="iframe"
                   data-src="http://somelink.com"
                   data-type="iframe">
                    Link
</a>

【问题讨论】：

标签： javascript jquery fancybox-3

【解决方案1】：

试试这个，用你的 href 元素更改下面代码中的var url =。

$(".fancybox").fancybox({
    autoScale: false,
    // href : $('.fancybox').attr('id'), // don't need this
    type: 'iframe',
    padding: 0,
    closeClick: false,
    // other options
    beforeLoad: function () {
        var url = $(this.element).attr("id");
        this.href = url
    }
}); // fancybox

【讨论】：

触发了之前的加载但没有设置url。将其简化为： jQuery('[data-fancybox]').fancybox({ beforeLoad: function () { var url = 'google.com'; console.log('Debug: ' + url); this.href = url ; } })

【解决方案2】：

使用 jQuery data 方法简单地设置新源：

$('selector').data('src', 'new link')

【讨论】：