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

Question

我目前有几个 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 解决方案，所以我不知道它是否适合我。

更新 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

基于 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/