Fancybox - 无法在iframe中打开类似Facebook的框

时间:2012-07-26 07:42:22

标签: php javascript jquery ajax fancybox

我是js的新手,并试图在第一次加载我的网站时打开包含我的脸书粉丝页面的fancybox iframe但没有成功。 我已经对fancybox中的js文件和头部分中的适当css进行了所有调用 我试图在索引页面中包含代码,以便在页面加载时显示iframe但没有成功,iframe只是没有显示。这是我使用的代码:

<script type="text/javascript">
$(document).ready(function() {
    $(".iframe" ).fancybox({
        'width'             : '75%',
        'height'            : 440,
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe',
        'href'              : "www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPalindrom%2F104421159704142&amp;width=600&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%2399c844&amp;stream=false&amp;header=false&amp;appId=391204344279942"
    });
$(".iframe").eq(0).trigger('click');​        
});
</script>

<a id="iframe"></a>

解决!多谢你们!设法使用$ .fancybox打开它而不需要锚点。这里是我使用的代码也许它会帮助其他人,当涉及到jquery和fancybox时我也是新手(我还添加了一个延迟计时器):

<script type="text/javascript">
setTimeout(function() {
  // Do something after 5 seconds

$.fancybox({
    'width'             : 620,
    'height'            : 260,
    'autoScale'         : true,
    'transitionIn'      : 'fade',
    'transitionOut'     : 'elastic',
    'openEffect'        : 'fade',
    'closeEffect'       : 'elastic',
    'type'              : 'iframe',
    'href'              : "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPalindrom%2F104421159704142&width=600&height=258&colorscheme=light&show_faces=true&border_color=%2399c844&stream=false&header=false&appId=391204344279942"
});
}, 5000);

2 个答案:

答案 0 :(得分:1)

如果在http://之前添加www呢?

所以这个选项

'href'  : "www.facebook.com/....

应该看起来像

'href'  : "http://www.facebook.com/...

答案 1 :(得分:0)

<script>
$(document).ready(function() {
    $(".iframe" ).fancybox({ // .iframe - defined class here
        'width'             : '75%',
        'height'            : 440,
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe',
        'href'              : "www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPalindrom%2F104421159704142&amp;width=600&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%2399c844&amp;stream=false&amp;header=false&amp;appId=391204344279942"
    });
$(".iframe").eq(0).trigger('click');​        
});
</script>

<a id="iframe"></a> <!-- #iframe - defined an ID here -->

也许您可以尝试将ID <a id="iframe"></a>更改为<a class="iframe"></a>

的类

JsFiddle演示here