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

【问题标题】：How Can I Replace 100% Width in the New Twitter Widget Using CSS code?如何使用 CSS 代码替换新 Twitter 小部件中的 100% 宽度？
【发布时间】：2015-09-20 12:02:09
【问题描述】：

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

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

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

}

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

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

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

我找到的关于自定义当前 Twitter 小部件的唯一链接是下面的链接。其中大部分是 2011-2013 年的。

Twitter embedded timeline 100% width

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

2015 年 7 月 16 日更新 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>

【问题讨论】：

"通过向时间线的锚元素添加宽度或高度属性来设置嵌入时间线的最大宽度或最大高度。"您是否尝试在链接上放置一个非常大的宽度以查看它是否有效？正如我在<a> 上看到的宽度一样，但小部件的宽度为 max-width: 100%;
没用。当我再次阅读这篇文章时，我意识到他们说最大为 520 像素，这意味着这将是可用的最宽宽度。可能有办法解决这个问题。但是我确定我将如何在我的媒体查询中覆盖它。
你能发个小提琴吗？它总是有帮助的。
我见过小提琴，但我不知道如何制作。
只要去jsfiddle.net添加html、css和js相关部分即可。 :)

标签： jquery css twitter

【解决方案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/

【讨论】：

刚刚意识到 JS Fiddle 中的 Firefox 不喜欢这个测试，不确定这是否是一个小提琴问题，但似乎可以在 Chrome 上运行。
我第一次点击你的 jsfiddle 链接时它工作正常（最新版本的 Safari/Mac）。当我再次单击该链接时，它显示为 552px。这可能是 jsfiddle 中的一个错误。我应该将脚本放在中还是放在小部件所在的页面上？我最初将代码放在中，以涵盖网站中的所有 Twitter 小部件。
这不是 JSFiddle 的错误。问题是您提供的脚本在没有建立 Twitter 的情况下加载了已经在您的页面上注入了 iframe。因此，如果您的脚本胜过 Twitter，上面的代码会尝试修改不存在的 iframe。

【解决方案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/

【讨论】：

布拉德，非常感谢！我已经尝试了解决方案 1 和 3。我将代码放在中。在所有情况下，小部件都以 100% 的宽度显示。第一次显示带有 twitter 小部件的页面时，小部件按预期显示。然而，随后显示带有 twitter 小部件的页面时，必须刷新页面才能再次看到该小部件。看起来它可能需要每次都将页面显示为新的某处。也许它在小部件本身中。不过不确定。
布拉德，我对多个 Twitter 小部件的问题进行了更多检查。我决定打开我的另一个网站，该网站使用我没有修改的 Twitter 小部件并且有同样的问题。问题出在您提供的 JavaScript 代码之外。我已经检查了您的解决方案。我正在使用解决方案 1，因为在显示 Twitter 小部件的页面上没有任何其他 iframe。
注意：我将脚本从 application.html.erb 移到了我所有 Rails 应用程序的 assets 文件夹中。

【解决方案3】：

在这里解决：https://stackoverflow.com/a/31961647/2046152

这个解决方案对我有用。

基本上，您必须将一些 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>

【讨论】：

【解决方案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

【讨论】：