页面加载时推特框的高度

jQuery CSS Height of twitter box on page load

本文关键字：高度 加载      更新时间：2023-09-26

我知道这听起来有多蠢…

我正在尝试重新设置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 Embedded Timeline Callback

我现在通过替换:

修复了这个问题。
<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.
相关文章：