通过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中的人员注释，但对我没有任何帮助。

谁能帮忙吗？

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

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

见的jsfiddle使用的fancybox v2.1.5

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