为iframe设置样式，然后使其可见

Style the iframe and then make it visible

本文关键字：然后 iframe 设置 样式      更新时间：2023-09-26

我使用Twitter小部件在我的网站是在一个iframe。我正在给这个框架做造型，没有任何问题。我的问题是，我首先看到旧的，让我们说iframe，然后我可以看到改变的样式。有没有一种方法有iframe隐藏，而所有的css/样式的变化都发生在背景上，然后使其可见?

我使用这个jquery:

 $(document).ready(function(){
    hideTwitterBoxElements();
 });
 var hideTwitterAttempts = 0;
 function hideTwitterBoxElements() {
   setTimeout( function() {
    if ( $('[id*=twitter]').length ) {
        $('[id*=twitter]').each( function(){
            var ibody = $(this).contents().find( 'body' );
            ibody.find(".timeline .stream").css("padding-top", "10px")
            if ( ibody.find(".timeline .stream .h-feed li.tweet").length ) 
                ibody.find(".timeline").css("background-color","transparent");  
                ibody.find(".customisable-border").css("border","none");    
                ibody.find(".timeline .stream").css("overflow","hidden");   
            }
        });
    }
    hideTwitterAttempts++;
    if ( hideTwitterAttempts < 3 ) {
        hideTwitterBoxElements();
        $("#twitter").show();
    }
}, 1500);

}

发生的事情是，当我加载页面时，iframe会在一段时间后出现(如果可能的话，我也可以减少时间)，然后我可以看到例如溢出变为隐藏。

编辑:

把你的代码和这个混搭，我们得到了一个很好的结果。

JSFiddle 

function hideTwitterBoxElements() {
    var hideTwitterAttempts = 0;
    if ($('.twitter-timeline').length) {
        //Timeline exists is it rendered ?
        interval_timeline = false;
        interval_timeline = setInterval(function(){
            //console.log($('.twitter-timeline').width());
            if ($('.twitter-timeline').hasClass('twitter-timeline-rendered')) {
                if ($('.twitter-timeline').width() > 10) {
                    //Callback
                    clearInterval(interval_timeline);
                    setTimeout( function() {
                        if ( $('[id*=twitter]').length ) {
                            $('[id*=twitter]').each( function(){
                                var ibody = $(this).contents().find( 'body' );
                                ibody.find(".timeline .stream").css("padding-top", "10px");
                                if ( ibody.find(".timeline .stream .h-feed li.tweet").length ); 
                                ibody.find(".timeline").css("background-color","transparent");  
                                ibody.find(".customisable-border").css("border","none");    
                                ibody.find(".timeline .stream").css("overflow","hidden");
                            });
                        }
                        hideTwitterAttempts++;
                        if ( hideTwitterAttempts < 40 ) {
                            hideTwitterBoxElements();
                            $("#twitter").show();
                        }
                    }, 100);
                }     
            }
        },200);
    }
}
$(document).ready(function(){
    hideTwitterBoxElements();
});
相关文章：