Question

我正在努力改变推特时间线iframe的宽度。我查看了开发人员工具检查一个元素并更改了多个元素的宽度，但似乎没有任何工作。

我尝试过改变：

.SandboxRoot, env-wide {
    width: 30%;
}
.timeline-Widget {
    width: 30%;
}
.twitter-timeline, .twitter-timeline-rendered {

    width: 30%;
}

#twitter-widget-0 {

    width: 30%;
}

这是一个小提琴：https://jsfiddle.net/9pnxL6fb/。如果您需要现场查看，请告诉我。

为什么我不能根据我使用的元素更改宽度？

Answer 1

你需要在#blue div

中定位iframe

#blue iframe {width:30%!important;}

Answer 2

尝试使用！important。我希望它会有所帮助。

#blue {
   width: 30% !important;
 }

Answer 3

library(lubridate)

currentDate <- Sys.Date()

end_last_month <- rollback(currentDate)

init_last_month <- rollback(end_last_month, roll_to_first = TRUE)

CSS代码

<div id="blue">
<div class="twitter-iframe">
<a class="twitter-timeline"
</div>
</div>

Answer 4

如果默认情况下维度是由Twitter提供的硬编码，您将无法仅使用CSS覆盖它。相反，通过更改js中提供的属性来覆盖。 Twitter widget documentation

Answer 5

使用jQuery对CSS进行一些更改的方法之一是使用jQuery，如下所示：其他答案是半正确的，您可以使用下面的代码覆盖，只是更改css可能无法在不同的情况下工作环境。

$(window).on('load', function() {
    $('iframe[id^=twitter-widget-]').each(function () {
        var head = $(this).contents().find('head');
        if (head.length) {
            head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
    }
        $('#twitter-widget-0').append($('<div class=timeline>'));
    })
});

CSS：

iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;
}

工作小提琴：

https://jsfiddle.net/48dy23ep/1/

Answer 6

这是一次黑客攻击而不是网络母带制作： - ）

通常，不可能操纵父文档中的iframe内容。这是出于安全原因受到保护，不会注入任何可疑的JavaScript代码等。我正在查看生成帖子的代码。代码请求twitter API获取完整的后期生成JavaScript文件并将其放入DOM中。

唯一的方法是Twitter帖子API，但它是有限的...（Twitter Widget Javascript）

更改iframe的宽度

6 个答案: