Twitter嵌入式时间线100％宽度

Question

我有一个在this page上运行的Twitter嵌入式时间线。

通过CSS，我已经添加了以下类：

.twitter-timeline { 
    min-width: 100% !important; 

直到昨天，这个CSS成功延长了时间轴内容区域的整个宽度，但今天的风格不工作。

我可以看到Twitter的有iframe中下面的样式运行：

.timeline { 
    max-width: 520px; 

我认为这是Twitter的最近增加的东西。我能做些什么来覆盖这个吗？我试着加入以下到我的CSS类，但并未奏效：

.twitter-timeline { 
    min-width: 100% !important; 
    width: 100% !important; 

我知道，我可以挖掘到Twitter的API来创建自定义的饲料，但我们用不上给艺术家的Twitter帐户生成访问令牌等。

Answer 1

如前所述叽叽喳喳目前不允许其时间线窗口小部件来获得100％的宽度。对于响应式网站来说，这是一个痛苦，但有一个解决方案（现在）。

在Twitter嵌入脚本上使用回调，并将其指向一个改变iframe样式的函数。

解决方案使用jQuery

更换你叽叽喳喳嵌入代码（<a>标签下方）与此有关。

  <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) {responsiveTwitterWidget()});"); 
          fjs.parentNode.insertBefore(js,fjs); 
         }}(document,"script","twitter-wjs"); 

        function responsiveTwitterWidget(){ 
         var widget = $("#twitter-widget-0"); 
         var frame_style = widget.attr('style'); 
         widget.attr('style', frame_style + ' max-width:none !important; width:100%'); 
         if(widget) { 
          var head = widget.contents().find("head") 
          if (head.length) { 
           head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>'); 
          } 
          widget.append($('<div class=timeline>')); 
         } 
        } 
       </script> 

如果页面上有多个时间轴小部件，则需要进行调整。

可能不适用于某些较旧的IE浏览器。

Answer 2

您需要使用javascript。

下面是使用jQuery的解决方案：

$("iframe[id^='twitter-widget-']").contents().find(".timeline").css("maxWidth", "none"); 

Answer 3

您可以将外部CSS文件到Twitter的iframe中，背景会变为浅蓝色这个例子。

<script type="text/javascript"> 
    $(window).load(function() { 
     function changeWidget() { 
      var twFrame = $('iframe#twitter-widget-0'); 
      if (twFrame.length > 0) { 
       twFrame.contents() 
       .find('head').append('<link href="http://www.w3schools.com/css/mystyle.css" rel="stylesheet" type="text/css" media="all" />'); 
      } else { 
       setTimeout(changeWidget, 1500); 
      } 
     } 
     changeWidget(); 
    }); 
</script> 

附加包含自己的CSS的位置：

.timeline{ 
    max-width: 100% !important; 
} 

Answer 4

这为我工作。

CSS

iframe[id^='twitter-widget-0'] { 
    height:600px !important; 
    margin-bottom:10px !important; 
    width:100% !important; 
} 

的Javascript

$(window).on('load', function() { 
    $('iframe[id^=twitter-widget-]').each(function() { 
     var head = $(this).contents().find('head'); 
      if (head.length) { 
       head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>'); 
      } 
      $('#twitter-widget-0').append($('<div class=timeline>')); 
    }) 
}); 

找到了解决这个冲浪时，网络连接。

https://wordpress.org/support/topic/how-can-create-full-width-twitter-timeline-on-responsive-page

Answer 5

的JavaScript

$(document).ready(function() { 
    window.twttr = (function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; 
    if (d.getElementById(id)) return t; 
    js = d.createElement(s); 
    js.id = id; 
    js.src = "https://platform.twitter.com/widgets.js"; 
    fjs.parentNode.insertBefore(js, fjs); 

    t._e = []; 
    t.ready = function(f) { 
     t._e.push(f); 
    }; 

    return t; 
    }(document, "script", "twitter-wjs")); 

    twttr.ready(function(twttr) { 
    $(".tweet").each(function() { 
     twttr.widgets.createTweet($(this).data("id"), $(this)[0], {cards: "hidden"}).then(function(el) { 
     $(el).contents().find('.EmbeddedTweet').css('max-width', '800px'); 
     }); 
    }); 
    }); 
}); 

HTML

<div class="tweet" data-id="705128887810965504"></div> 

Answer 6

简单和工程： $('.twitter-timeline').css({width: '100%'});