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

如果您使用的是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);

使用fancybox v1.3.4

查看 JSFIDDLE

另一方面，如果你真的使用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);

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

使用fancybox v2.1.5

查看 JSFIDDLE

Answer 2

这应该有效：

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

通过javascript函数调用时，Fancybox iframe无法正常工作

2 个答案: