我是js的新手,在第一次加载我的网站时,我曾尝试打开一个包含我的facebook粉丝页面样框的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&width=600&height=258&colorscheme=dark&show_faces=true&border_color=%2399c844&stream=false&header=false&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);
在www
之前添加http://
怎么样?
所以这个选项
'href' : "www.facebook.com/....
应该看起来像
'href' : "http://www.facebook.com/...
<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&width=600&height=258&colorscheme=dark&show_faces=true&border_color=%2399c844&stream=false&header=false&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 Demo here