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

我目前有几个RubyonRails应用程序，通过媒体查询使用响应式web设计。我使用了下面的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

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

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

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

更新于2015年7月16日1100 GMT-5

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

我在

application.html.erb

中添加了以下行以更正$的引用错误。我认为jquery rails gem会识别我的代码

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

我创造了一个新的世界。当我点击JSHint时，它说我的代码完全有效。小部件显示为552px的宽度。我不确定问题是否出在代码的位置。我需要帮助来确定为什么我的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>

……小部件语句。。。。。。。。。。。。。

您可以使用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;");

}))

---

根据克里斯的回答。这有一个间隔，用于检查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);
});

$(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：

或者，如果您有一个，您可以放下

.each（）

，然后使用以下命令：

$(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);
});

$(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：

编辑：有人可能会说，上面的代码也很容易失败，因为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);
});

此处解决：

这个解决方案对我有效

基本上，您必须向twitter小部件iframe中注入一些css

本例使用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>

.时间线{最大宽度：100%；}
twttr.widgets.createTimeline(
“WIDGET_ID_GO_HERE”，
$（“#小部件占位符转到此处”）[0]，
{
chrome:'nofooter noheader'//可选
}
).然后（功能（el）{
$（el.contents（）.find（'head'）.append（$（'twitter style'））；
});

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

要将宽度设置为550px或更小，只需将宽度的数据属性添加到

blockquote.twitter tweet

元素中即可

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

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

它将每个iframe设置为100%宽度，然后删除每个iframe内容中

tweet

div上的

最大宽度

2016年1月13日编辑：Twitter再次更改了tweet CSS
“通过向时间线的锚元素添加宽度或高度属性来设置嵌入时间线的最大宽度或最大高度。”您是否尝试在链接上放置非常大的宽度以查看其是否有效？如我所见，
上的宽度用作宽度，但小部件的最大宽度为100%；不起作用。当我再次读到这篇文章时，我意识到他们说最大是520像素，这意味着这将是可用的最宽宽度。也许有办法解决这个问题。不过，我确定我将如何在我的媒体查询中覆盖这一点。你能发布一个提琴吗？它总是有用的。我见过小提琴，但我不知道如何创建。只需转到并添加html、css和js相关部分即可。：）刚刚意识到JS Fiddle中的Firefox不喜欢这个测试，不确定这是否是一个Fiddle问题，但似乎在Chrome上工作。我第一次点击你的JSFIDLE链接时，它工作正常（Safari/Mac的最新版本）。当我再次点击链接时，它显示为552px。这可能是JSFIDLE中的一个bug。我应该把脚本放在小部件所在的页面上还是放在页面上？我最初的代码是为了涵盖网站中的任何Twitter小部件。这不是JSFIDLE的错误。问题是您提供的脚本在没有建立Twitter的情况下加载，但它已经在您的页面上注入了iframe。因此，如果你的脚本打败了Twitter，上面的代码会试图修改一个不存在的iframe。Brad，非常感谢！我尝试了解决方案1和3。我把代码放进了。在所有情况下，小部件都以100%的宽度显示。第一次显示带有twitter小部件的页面时，小部件将按预期显示。但是，在随后显示带有twitter小部件的页面时，必须刷新页面才能再次看到该小部件。似乎每次都需要将页面显示为新页面。也许它就在小部件里。不过不确定。布拉德，我用多个推特小部件进一步检查了这个问题。我决定打开我的另一个网站，它使用我没有修改的Twitter小部件，并且有同样的问题。问题不在您提供的JavaScript代码范围内。我已经检查了你的解决方案。我使用的是解决方案1，因为我在Twitter w