[英]jQuery CSS Height of twitter box on page load
我知道这听起来多么愚蠢...
我正在尝试调整iframe的尺寸。 这是我所拥有的:
function doTwitterHeight(screenwidth)
{
if(!screenwidth){
var screenwidth = window.innerWidth;
console.log('screenwidth is now defined as: ' + screenwidth);
}
if(screenwidth >= 981){
$('#twitter-widget-0').css('height',466);
}
else if(screenwidth <= 980 && screenwidth >= 952){
$('#twitter-widget-0').css('height',614);
}
else if(screenwidth <= 951 && screenwidth >= 877){
$('#twitter-widget-0').css('height',632);
}
//etc.
else{
$('#twitter-widget-0').css('height',468);
}
}
调用resize时,该函数有效,如下所示:
$(window).on('resize', function(){
doTwitterHeight();
});
但是我还需要调用该函数,并在首次加载页面时重新调整该div的高度。 我试过了:
$(window).on('load', function() {
doTwitterHeight();
});
和:
$(document).ready(function(){
doTwitterHeight();
});
和:
$(doTwitterHeight());
而且我与他们中的任何一个都没有运气。
提前致谢 :)
因此解决方案是修改twitter为iframe嵌入提供的代码。 通过使用以下建议: Twitter嵌入式时间轴回调
我现在通过替换来解决此问题:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
有:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
即通过添加:
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");
您可以尝试以下方法:
$(window).on('load resize', doTwitterHeight).resize(); // <---trigger it on load
或根据您的代码段:
$(window).on('resize', function(){
doTwitterHeight();
}).resize(); // <-----this triggers the resize on page load.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.