Twitter 嵌入式时间轴 100% 宽度

Question

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

通过 CSS，我添加了以下 class：

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

直到昨天，这个 CSS 才成功将时间轴扩展到内容区域的整个宽度，但今天样式不起作用。

我可以看到 Twitter 在 iframe 中具有以下样式运行：

.timeline {
     max-width: 520px;

我想这是 Twitter 最近添加的内容。我能做些什么来覆盖它吗？我已经尝试将以下内容添加到我的 CSS class，但没有成功：

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

我知道我可以进入 Twitter API 来创建自定义提要，但我们无法访问艺术家的 Twitter 帐户来生成访问令牌等。

Answer 1

您需要使用javascript。

这是 jQuery 的解决方案：

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

Answer 2

您可以将外部 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 3

这对我有用。

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 4

如前所述，Twitter 目前不允许其时间轴小部件获得 100% 的宽度。对于响应式网站来说，这很痛苦，但有一个解决方案（目前）。

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

解决方案使用Jquery

用这个替换你的 Twitter 嵌入代码（在 <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 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%'});

Answer 7

实际上它对我有用，只需从 <a class="tweeter-timeline"

中删除 data-width 和 data-height 属性

<div class="col-xs-12 col-md-2...">
    <a class="twitter-timeline">...</a>

Answer 8

您需要手动闯入他们的 iFrame 并像这样自己修改 CSS。

<body onload="onLoad()">

<script>

function onLoad() {
    var twitter_iframe = document.getElementById('twitter-widget-0');
    var twitter_document = twitter_iframe.contentDocument || twitter_iframe.contentWindow.document;
    var twitter_timeline = twitter_document.getElementsByClassName("timeline-Widget")[0];
    twitter_timeline.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}

</script>

注意：显然，如果他们调整他们的 JS，这可能会停止工作，但好消息是它不会破坏你的页面或任何东西，它只会回到没有 100% 宽度的状态。

编辑：

我对此进行了更强大的攻击，因为有时会在调用 body 的 onLoad 后加载 twitter 提要。对于几乎所有情况，以下方法也将抓住这些：

    function onLoad() {
        resizeTwitterFeed();
        setTimeout(function(){ resizeTwitterFeed(); }, 100);
        setTimeout(function(){ resizeTwitterFeed(); }, 250);
        setTimeout(function(){ resizeTwitterFeed(); }, 500);
        setTimeout(function(){ resizeTwitterFeed(); }, 750);
        setTimeout(function(){ resizeTwitterFeed(); }, 1000);
        setTimeout(function(){ resizeTwitterFeed(); }, 2000);
        setTimeout(function(){ resizeTwitterFeed(); }, 3000);
        setTimeout(function(){ resizeTwitterFeed(); }, 5000);
        setTimeout(function(){ resizeTwitterFeed(); }, 10000);
    }
    
    function resizeTwitterFeed() {

        var twitter_iframe = document.getElementById('twitter-widget-0');
        if (twitter_iframe) {
            var twitter_document1 = twitter_iframe.contentDocument;
            if (twitter_document1) {
                var twitter_timeline1 = twitter_document1.getElementsByClassName("timeline-Widget")[0];
                if (twitter_timeline1) {
                    twitter_timeline1.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
                }
            }
            
            var twitter_document2 = twitter_iframe.contentWindow.document;
            if (twitter_document2) {
                var twitter_timeline2 = twitter_document2.getElementsByClassName("timeline-Widget")[0];
                if (twitter_timeline2) {
                    twitter_timeline2.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
                }
            }

            twitter_iframe.onload = function() {
                resizeTwitterFeed();
                return true;
            }
        }
        
    }

Answer 9

我们最近发现 Twitter 在 publish.twitter.com 上用于嵌入式配置文件时间轴的相当新的代码生成器仍然会导致时间轴溢出 iOS 设备的容器宽度的问题，尤其是宽度和高度设置（并且未设置 data-tweet-limit）。

在尝试了上述所有 javascript 解决方案以保持容器的时间宽度 = 100%，但将时间线限制在不超过容器宽度的情况下，我们通过添加 css（选择器可能会根据需要由您的额外特异性进行处理）：

.twitter-timeline { width: 100vw !important; }

请注意，您需要确保视口已设置，也许是这样（但要适合您的实施）：

<meta name="viewport" content="width=device-width, initial-scale=1">

还要注意旧的 shrink-to-fit=no hack 在现代似乎不再有任何影响 iOS

Twitter 嵌入式时间轴 100% 宽度

Twitter embedded timeline 100% width

html

css

twitter

编辑：