通过 javascript 函数调用时 Fancybox iframe 不工作

Question

我尝试在 fancybox 中调用 iframe，但它不起作用。

这是我写的：

        var paramsFancy={
            'transitionOut': 'elastic',
            'transitionIn': 'elastic',
            'speedOut': 300,
            'speedIn': 500,
            'autoScale': true,
            'centerOnScroll': true,
            'autoDimensions': true,
            'href' : '/index.php'
        };
        $.fancybox.open(paramsFancy);

我阅读了来自 Open fancybox from function 的人们的评论，但对我没有任何帮助。

有人可以帮忙吗？

Answer 1

这应该有效：

    var paramsFancy={
        'transitionOut': 'elastic',
        'transitionIn': 'elastic',
        'speedOut': 300,
        'speedIn': 500,
        'autoScale': true,
        'centerOnScroll': true,
        'autoDimensions': true,
        'href' : '#contentdiv',
        'type': 'iframe'
    };
    paramsFancy.href='/index.php';
    $.fancybox.open(paramsFancy);

Answer 2

如果您使用的是 fancybox v1.3.4（我的猜测，因为上面代码中的 API 选项）那么您需要这样做：

$.fancybox(paramsFancy);

... 因为 $.fancybox.open() 不是 v1.3.x 及以下版本的有效方法。它是为 v2.x 及更高版本引入的。

此外，如果您想打开 iframe，则需要将 type API 选项添加到您的设置中，例如：

var paramsFancy = {
    transitionOut: 'elastic',
    transitionIn: 'elastic',
    speedOut: 300,
    speedIn: 500,
    autoScale: true,
    centerOnScroll: true,
    autoDimensions: true,
    href : '/index.php',
    type: "iframe" // need this for external pages
};

$.fancybox(paramsFancy);

参见JSFIDDLE 使用 fancybox v1.3.4

另一方面，如果您真的在使用 fancybox v2.x，那么您需要更新 API 选项，例如：

var paramsFancy = {
    closeEffect: 'elastic', // transitionOut
    openEffect: 'elastic', // transitionIn
    closeSpeed: 300, // speedOut
    openSpeed: 500, // speedIn
    fitToView: true, // autoScale
    autoCenter: true, // centerOnScroll
    autoSize: true, // autoDimensions
    href: '/index.php',
    type: "iframe" // you still need this
};

注意我注释掉了v1.3.4的选项

那么你可以使用

$.fancybox(paramsFancy);

或

$.fancybox.open(paramsFancy);

...因为第一种方法是向后兼容的。

参见JSFIDDLE 使用 fancybox v2.1.5

通过 javascript 函数调用时 Fancybox iframe 不工作

Fancybox iframe not working when called via javascript function

javascript

jquery

fancybox

fancybox-2