如何使用 CSS 代码替换新 Twitter 小部件中的 100% 宽度？

Question

我目前在 Rails 应用程序上有几个 Ruby，我在这些应用程序中通过媒体查询使用响应式网页设计。我使用以下 CSS 代码将宽度覆盖到 100%。

#twitter-widget-0, #twitter-widget-1 {

  float: none; 
  width: 100% !important;   
  font-size: 12px;

}

但是我在 2015 年 7 月注意到 Twitter 小部件不再以 100% 显示而是以固定大小显示。我查看了 Twitter 的开发者网站，发现 Twitter 小部件的自定义已经扩展。当我检查小部件时，我看到我的 CSS 中的 CSS 参数，但我也看到宽度设置为 520px。

https://dev.twitter.com/web/embedded-timelines

看着这个 link 我知道我可以在代码中用固定宽度对参数进行编码。不知道任何人可能用来显示我的 Web 应用程序的屏幕大小，我不愿意在任何地方设置固定大小。另一个问题是不会在我的媒体查询中更改它。

我发现的关于自定义当前 Twitter 小部件的唯一 link 是下面的一个。其中大部分是 2011-2013 年的。

这个问题是由使用 Wordpress 中的 Twitter 小部件的人提出的。使用的解决方案 jQuery。我在 Javascript 方面不够熟练，无法实施 Javascript 或 jQuery 解决方案，所以我不知道它是否适合我。

更新 7/16/2015 1100 GMT-5

今天早上我决定再做一次搜索，发现这个 link 有三个最近的 jQuery 解决方案，人们说他们开始工作了。

我在 application.html.erb 中添加了以下行来更正 $ 的 ReferenceError。我虽然 jquery-rails gem 会识别我的代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

我创建了一个 fiddle。当我点击 JSHint 时，它说我的代码完全有效。该小部件显示时宽度为 552 像素。我不确定问题是否出在我有代码的地方。我需要帮助来确定为什么我的 jQuery 代码没有实现我的目标。

这是我检查 Twitter 小部件时的 iframe 语句：

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 520px;" title="Twitter Timeline" height="400">
.......widget statements.............
</iframe>

Answer 1

您可以使用 jQuery 在 iframe 中定位 div 的内联样式，方法如下：

$(document).ready(function() {
$("#twitter-widget-0").contents().find(".timeline").attr("style","max-width:100% !important;");
$("#twitter-widget-0").attr("style","max-width:100% !important; width: 100% !important;");

});

https://jsfiddle.net/v7xom6ms/9/embedded/result/

Answer 2

基于 Kris 的回答。这有一个时间间隔来检查 iframe 是否可用于操作。如果是这样，它会触发代码，然后清除间隔。

如果您有多个 Twitter 源，请使用：

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        if($('iframe[id^="twitter-widget-"]').length) {
            $('iframe[id^="twitter-widget-"]').each(function () {
                $(this).contents().find(".timeline").attr("style","max-width:100% !important;");
                $(this).attr("style","max-width:100% !important; width: 100% !important;");
            });
            clearInterval(twitterCheck);
        }
    }, 1000);
});

JSFiddle：http://jsfiddle.net/v7xom6ms/20/

或者如果你有一个，你可以删除 .each() 并使用这个：

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        var twitterFrame = $("#twitter-widget-0");
        if(twitterFrame.length) {
            twitterFrame.contents().find(".timeline").attr("style","max-width:100% !important;");
            twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
            clearInterval(twitterCheck);
        }
    }, 1000);
});

JSFiddle：http://jsfiddle.net/v7xom6ms/21/

编辑：有人可能会争辩说上面的代码也很容易失败，因为 iframe 已加载但您无法确认加载的内容。容易修复。这也允许我们降低间隔以实现不太明显的调整大小转换。

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        var twitterFrame = $("#twitter-widget-0");
        var twitterTimeline = twitterFrame.contents().find(".timeline");
        if(twitterFrame.length && twitterTimeline.length) {
            twitterTimeline.attr("style","max-width:100% !important;");
            twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
            clearInterval(twitterCheck);
        }
    }, 10);
});

http://jsfiddle.net/v7xom6ms/22/

Answer 3

这里解决了：

这个解决方案适合我。

基本上，您必须将一些 css 注入到您的 Twitter 小部件 iframe 中。

这个例子使用jQuery

<style type="text/css" id="twitter-style">
  .timeline { max-width: 100%; }
</style>

<script type="text/javascript">
twttr.widgets.createTimeline(
          'WIDGET_ID_GO_HERE',
          $('#widget-placeholder-go-here')[0],
          {
            chrome: 'nofooter noborders noheader' //optional
          }
        ).then(function(el) {
          $(el).contents().find('head').append($('#twitter-style'));
        });
</script>

Answer 4

请注意，单个嵌入式推文不同于嵌入式时间线。

要将宽度设置为 550 像素或更小，只需将宽度的数据属性添加到 blockquote.twitter-tweet 元素即可。

对于单个嵌入式推文并使用 jQuery，我可以将推文设置为容器的 100% 宽度：

$('iframe.twitter-tweet')
  .css('width', '100%')
  .css('max-width', '100%')
  .contents().find('.EmbeddedTweet').css('max-width', 'none');

它将每个 iframe 设置为 100% 宽度，然后删除每个 iframe 内容中每个 .twitter-tweet div 上的 max-width。

2016/1/13 编辑：Twitter 再次更改推文 CSS

如何使用 CSS 代码替换新 Twitter 小部件中的 100% 宽度？

How Can I Replace 100% Width in the New Twitter Widget Using CSS code?

css

twitter

jquery