几天/几周前，我的一些网站的 twitter 小部件停止正确提取数据。事实证明，第 2 版 twitter 小部件已被弃用，而新的嵌入式时间线小部件显然是唯一可行的方法。
https://dev.twitter.com/blog/planning-for-api-v1-retirement
除了这个新的小部件创建了一个 iframe，它可以防止在我自己的样式表中对小部件进行任何自定义样式 - 例如设置字体系列、字体大小、颜色等。
有解决方法吗？从我正在阅读的内容来看，您无法将样式应用/注入到 iframe 中，而且我找不到任何 API 方式来做到这一点。
我还想将小部件限制为仅 3 条最近的推文；不确定这是否可行，并删除垂直滚动条（可能与限制推文有关）。
您可以尝试将一些内联 css 样式注入到iframe内加载的页面头部，而不是使用 jQuery 来定位元素，因此“显示更多”按钮加载的新内容也将被更改：
例如删除头像图片：
$("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');
我使用waituntilexists.js插件来检测何时将内容添加到 DOM 而不是 setTimeout()：https ://gist.github.com/buu700/4200601
所以我们有：
$("iframe#twitter-widget-0").waitUntilExists(function(){
$("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');
});
我在 Twitter 的增强时间轴中找到的唯一解决方案是在 iframe 加载后使用 javascript 修改 css。
需要使用 window.setTimeout 。正如 jamesnotjim 所提到的，请确保将其放在正文标记下方的脚本块中。
window.setTimeout(function(){
$(".twitter-timeline").contents().find(".e-entry-title").css("font-family","sans-serif");
$(".twitter-timeline").contents().find(".tweet").css("font-family","sans-serif");
}, 1000);
我想以user2787001提供的答案为基础。我发现即使使用这种方法（在 iframe 上使用waituntilexists.js），样式也并不总是被应用。等待 iFrame 加载很重要，因为 twitter 会即时加载它。然而，iframe 然后必须加载其内容；包含 Twitter 提要的网页，如果这需要比预期更长的时间，我们将再次尝试将样式应用于不存在的内容。最终，我们要检查样式是否已实际应用到 iframe 内的页面上，只有这样我们才能对工作完成感到满意。
为了应用样式，我引用了一个包含适当样式的独立样式表，使用<link rel="stylesheet"... >. 为了确保这已经成功应用，我给了它一个 id ( #twitter-widget-styles)，可以检查它以确认样式表已被放置。
我没有使用 waituntilexists.js 插件，而是通过使用window.setInterval. 不要 window.setTimeout随意延迟使用。很可能 twitter iframe 及其内容的加载时间比预期的要长。如果延迟太短，样式将无法应用。如果延迟太长，那么您的用户会看到一闪而过的无样式内容 (FOUC)
（注意：#twitter-widget-0是 twitter 在其 iframe 上使用的 id）
//Add twitter widget styling
var $iframeHead;
var twitterStylesTimer = window.setInterval(function(){
$iframeHead = $("iframe#twitter-widget-0").contents().find('head');
if( !$('#twitter-widget-styles', $iframeHead).length ){ //If our stylesheet does not exist tey to place it
$iframeHead.append('<link rel="stylesheet" href="/stylesheets/twitter-widget.css" id="twitter-widget-styles">');
}else if( $('#twitter-widget-styles', $iframeHead).length ){ //If stylesheet exists then quit timer
clearInterval(twitterStylesTimer);
}
}, 200);
一个小考虑，如果 iframe 无法加载或样式表永远不会被应用，计时器将无限期地运行。如果这是一个问题，可以添加计数器以在一定次数的尝试后退出该过程：
//Add twitter widget styling
var quitStyleCount = 0;
var $iframeHead;
var twitterStylesTimer = window.setInterval(function(){
$iframeHead = $("iframe#twitter-widget-0").contents().find('head');
if( !$('#twitter-widget-styles', $iframeHead).length ){ //If our stylesheet does not exist tey to place it
$iframeHead.append('<link rel="stylesheet" href="/stylesheets/twitter-widget.css" id="twitter-widget-styles">');
}else if( $('#twitter-widget-styles', $iframeHead).length || ++quitStyleCount > 40){ //If stylesheet exists or we've been trying for too long then quit
clearInterval(twitterStylesTimer);
}
}, 200);
延迟时间（示例中为 200 毫秒）和中断计数器（40 个周期）可以根据需要进行更改。
至于关于将代码插入 iframe 的问题。如果我们查看 twitter 呈现的 iframe，它没有src可以从另一个域中提取内容的属性：
<iframe frameborder="0" height="200" id="twitter-widget-0" scrolling="no" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: medium none; max-width: 100%; min-width: 180px; width: 520px;" title="Twitter Timeline"></iframe>
我尚未对此进行全面调查，但我希望 iframe 内容是从客户端计算机上运行的 twitter 脚本动态生成的。因此与其交互不会违反任何跨域限制。
要限制推文的数量，请使用data-tweet-limit="x"嵌入代码中使用的锚标记上的属性
<a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxx">Tweets by xxxxxxxxxx</a>...
这在twitter 文档中进行了讨论：
推文限制：要将时间线的大小固定为预设的推文数量，请使用 data-tweet-limit="5" 属性和 1 到 20 条推文之间的任何值。时间线将从时间线渲染指定数量的推文，扩展小部件的高度以显示所有推文而无需滚动。由于小部件具有固定大小，因此在使用此选项时它不会轮询更新。
我需要查看您的代码才能给出明确的答案。有一个属性可以解决您的问题，再次在twitter 文档中讨论，在“Chrome”部分下：
data-chrome="noscrollbar"
noscrollbar：裁剪并隐藏主时间轴滚动条（如果可见）。请考虑隐藏标准用户界面组件可能会影响您网站的可访问性。
CSS 样式还可以通过诸如overflow: hidden.
我至少可以帮助限制推文和删除滚动条。
从文档中：
推文限制：要将时间线的大小固定为预设的推文数量，请使用 data-tweet-limit="5" 属性和 1 到 20 条推文之间的任何值。
和
Chrome：使用嵌入代码上的 data-chrome="nofooter transparent" 属性控制小部件布局和 chrome。使用以空格分隔的以下选项集：noheader、nofooter、noscrollbar、transparent。
还在看造型。
您可以在自己的项目中导入 twitter-widget.js javascript，然后在此 .js 文件中修改一些样式。
之后，您调用它而不是调用 twitter 的站点库//your.ownsite.web/widgets.js。它实际上是有效的，但对未来没有任何保证。
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
在 .js 中，查找以下代码块：
setupSandbox: function (a) {
var b = a.doc,
c = b.createElement("base"),
d = b.createElement("style"),
f = b.getElementsByTagName("head")[0],
g = "body{display:none} .timeline{border:1px solid #CCCCCC} .timeline-header{background-color:#F3F3F3;padding:8px 14px;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;} .timeline-header h1.summary{background-color:#F3F3F3; border-bottom:1px solid #EBEBEB; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; font-size:14px; font-weight:400; line-height:18px; margin:0; padding:0;};",
h = this,
i;
去这个网站下载这个插件，然后你可以用你选择 Jason Mayes的任何方式来设计
请参阅此处的“客户端选项” 。但基本上，您可以在样式化的 div 中拍打整个东西，删除页眉和页脚并使背景透明。我个人仍在寻找一种方法来限制推文数量并摆脱用户图标。
这是我们的代码（Drupal 块）： 好的，我无法让代码很好地显示。
这对我有用
function twitterfix() {
if(typeof $("#twitter-widget-0").contents().find(".load-more").html() == 'undefined') {
setTimeout(twitterfix, 500);
}
else {
var head = $("#twitter-widget-0").contents().find("head");
head.append('<link type="text/css" rel="stylesheet" href="wp-content/themes/mywordpresstheme/style.css">');
head.append('<style>.h-entry.tweet.with-expansion.customisable-border {border-bottom: 1px solid #EFEEEE;}</style>');
}
}
$(document).ready(function () {
twitterfix();
});
wiki.workassis.com
我发现只要将小部件包装在容器中，您就可以在没有 settimeout 的情况下使用准备好的文档。这不仅应该在页面加载时触发，还应该在页面加载后时间线本身的任何动态内容更改时触发。
jQuery(document).ready( function() {
jQuery('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
//your element changes here.
//Hide media items
jQuery(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
//Resize iframe when new content is posted.
jQuery(".twitter-block").css("height", "100%");
});
});
否则，我同意 a-gorsky 关于在 iframe 中添加样式表而不是对每个元素进行样式更改的看法。
In the Microsoft MVC world there are helpers in the Microsoft.Web.Helpers library, specifically using:
@Twitter.Profile(...
The above is just a wrapper around the V2 widget, but indicates there is a high usage of that particular widget.
I've looked into your question for a while now (in fact when the deprecation message started appearing) and I have come to the following conclusions:
时间线将 iframe 插入到页面中，那么为什么不直接获取 iframe 的内容并对其进行处理呢？
例如，这是使用 jquery 完成的方法：
$($('#IFRAME_ID').contents().find('body'))
您现在拥有完整的 twitter 提要作为 DOM 树，随心所欲。
设置推文数量很简单：
推文限制：要将时间线的大小固定为预设的推文数量，请使用 data-tweet-limit="5" 属性和 1 到 20 条推文之间的任何值。时间线将从时间线渲染指定数量的推文，扩展小部件的高度以显示所有推文而无需滚动。由于小部件具有固定大小，因此在使用此选项时它不会轮询更新。
不知道如何删除用户图标。
如果您查看widgets.js并查找此行：
e.appendStyleSheet(twttr.widgets.config.assetUrl() + "/" + r("embed/timeline.css"))).then(p.bind(function() {
您可以复制timeline.css并随意修改这两个文件。
这就是我所做的。如果您限制帖子的数量，它会自动删除滑块。
<a class="twitter-timeline" href="https://twitter.com/YOUR_ACCOUNT_NAME" data-widget-id="YOUR_ID_HERE" data-tweet-limit="4">Tweets by @YOUR_ACCOUNT_NAME</a>