我在这个页面上运行了一个嵌入式Twitter时间线。
通过CSS，我添加了以下类：
.twitter-timeline {
min-width: 100% !important;
昨天之前，这个CSS样式可以成功地将时间轴扩展到内容区域的整个宽度，但今天这个样式不起作用了。
我看到Twitter在iframe中运行以下样式：
.timeline {
max-width: 520px;
我猜这是 Twitter 最近添加的东西。有什么办法可以覆盖它吗？我尝试将以下内容添加到我的 CSS 类中，但没有效果：
.twitter-timeline {
min-width: 100% !important;
width: 100% !important;
我知道可以利用Twitter API创建自定义的信息流，但我们没有艺术家的Twitter帐户来生成访问令牌等。
如上所述，Twitter目前不允许时间线小部件使用100％的宽度。 对于响应式站点来说，这是一种痛苦，但现在有解决方案。
在twitter嵌入脚本上使用回调，并将其指向更改iframe样式的函数。
使用Jquery的解决方案
请用以下代码替换您的Twitter嵌入代码（在<a>标签下）。
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {responsiveTwitterWidget()});");
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
function responsiveTwitterWidget(){
var widget = $("#twitter-widget-0");
var frame_style = widget.attr('style');
widget.attr('style', frame_style + ' max-width:none !important; width:100%');
if(widget) {
var head = widget.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>');
}
widget.append($('<div class=timeline>'));
}
}
</script>
如果页面上有多个时间轴小部件，则需要进行调整。
在一些旧版IE浏览器上可能无法正常工作。
.twitter-timeline {
width: 100vw !important;
}
请注意，您需要确保视口已设置，例如：
<meta name="viewport" content="width=device-width, initial-scale=1">
还要注意，旧的shrink-to-fit=no hack在现代iOS中似乎已经没有任何效果。
CSS
iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;
}
$(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>'));
})
});
在浏览网站寻找解决方案时发现了这个。
https://wordpress.org/support/topic/how-can-create-full-width-twitter-timeline-on-responsive-page
简单而有效：
$('.twitter-timeline').css({width: '100%'});
javascript
$(document).ready(function() {
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
$(".tweet").each(function() {
twttr.widgets.createTweet($(this).data("id"), $(this)[0], {cards: "hidden"}).then(function(el) {
$(el).contents().find('.EmbeddedTweet').css('max-width', '800px');
});
});
});
});
html
<div class="tweet" data-id="705128887810965504"></div>
$("iframe[id^='twitter-widget-']").contents().find(".timeline").css("maxWidth", "none");
.timeline在Twitter iFrame中外部托管。 - Sam$("iframe[id^='twitter-widget-']").load(function () { /* 在这里放置代码 */ });的方法。 - Asdine$(document).ready(function() { $("iframe[id^='twitter-widget-0']").load(function () { $("iframe[id^='twitter-widget-0']").contents().find(".timeline").css("max-width", "none"); }); });гҖӮд»Қз„¶ж— жі•жӯЈеёёе·ҘдҪңпјҢжҺ§еҲ¶еҸ°д№ҹжІЎжңүжҳҫзӨәд»»дҪ•й”ҷиҜҜгҖӮд№ҹи®ёTwitterйҷҗеҲ¶дәҶиҝҷж ·зҡ„жӣҙж”№пјҹ - Sam您可以将外部CSS文件附加到Twitter iframe中，使用此示例，背景应更改为浅蓝色。
<script type="text/javascript">
$(window).load(function () {
function changeWidget() {
var twFrame = $('iframe#twitter-widget-0');
if (twFrame.length > 0) {
twFrame.contents()
.find('head').append('<link href="http://www.w3schools.com/css/mystyle.css" rel="stylesheet" type="text/css" media="all" />');
} else {
setTimeout(changeWidget, 1500);
}
}
changeWidget();
});
</script>
添加你自己的 CSS 文件路径：
.timeline{
max-width: 100% !important;
}
实际上，我成功地将<a class="tweeter-timeline"中的data-width和data-height属性删除后，它就可以工作了。
<div class="col-xs-12 col-md-2...">
<a class="twitter-timeline">...</a>
你需要手动进入他们的 iFrame，并自己修改 CSS，如下所示。
<body onload="onLoad()">
<script>
function onLoad() {
var twitter_iframe = document.getElementById('twitter-widget-0');
var twitter_document = twitter_iframe.contentDocument || twitter_iframe.contentWindow.document;
var twitter_timeline = twitter_document.getElementsByClassName("timeline-Widget")[0];
twitter_timeline.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
</script>
注意：显然，如果他们调整了他们的JS，这可能会在路上停止工作，但好消息是它不会破坏您的页面或任何东西，它只会简单地回到没有100％宽度的状态。
我对此进行了更强大的攻击，因为Twitter动态有时会在body的onLoad被调用后加载。以下方法将几乎适用于所有情况，包括获取这些动态：
function onLoad() {
resizeTwitterFeed();
setTimeout(function(){ resizeTwitterFeed(); }, 100);
setTimeout(function(){ resizeTwitterFeed(); }, 250);
setTimeout(function(){ resizeTwitterFeed(); }, 500);
setTimeout(function(){ resizeTwitterFeed(); }, 750);
setTimeout(function(){ resizeTwitterFeed(); }, 1000);
setTimeout(function(){ resizeTwitterFeed(); }, 2000);
setTimeout(function(){ resizeTwitterFeed(); }, 3000);
setTimeout(function(){ resizeTwitterFeed(); }, 5000);
setTimeout(function(){ resizeTwitterFeed(); }, 10000);
}
function resizeTwitterFeed() {
var twitter_iframe = document.getElementById('twitter-widget-0');
if (twitter_iframe) {
var twitter_document1 = twitter_iframe.contentDocument;
if (twitter_document1) {
var twitter_timeline1 = twitter_document1.getElementsByClassName("timeline-Widget")[0];
if (twitter_timeline1) {
twitter_timeline1.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
}
var twitter_document2 = twitter_iframe.contentWindow.document;
if (twitter_document2) {
var twitter_timeline2 = twitter_document2.getElementsByClassName("timeline-Widget")[0];
if (twitter_timeline2) {
twitter_timeline2.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
}
twitter_iframe.onload = function() {
resizeTwitterFeed();
return true;
}
}
}