如何使用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参数,但我也看到宽度设置为520px.

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

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

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

Twitter嵌入时间线100%宽度

有人在Wordpress中使用Twitter小部件询问了这个问题.解决方案使用jQuery.我在Javascript中不够擅长实现Javascript或jQuery解决方案,所以我不知道它是否适用于我.

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

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

我添加了以下行application.html.erb来更正$的ReferenceError.我虽然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>

Answer 1

基于克里斯的答案.这有一个间隔,用于检查iframe是否可用于操作.如果是这样,它会触发代码,然后清除间隔.

如果您有多个Twitter Feed,请使用以下命令:

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