CSS 设计新的 twitter 小部件（嵌入式时间线）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15533967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling the new twitter widget (embedded timeline)
提问by Sean
A few days/weeks ago, some of my sites' twitter widgets stopped pulling through data properly. Turns out Version 2 twitter widget is deprecated, and the new embedded timeline widget is the only way to go, apparently.
几天/几周前，我的一些网站的 twitter 小部件停止正确拉取数据。事实证明，第 2 版 twitter 小部件已被弃用，显然，新的嵌入式时间线小部件是唯一的出路。
https://dev.twitter.com/blog/planning-for-api-v1-retirement
https://dev.twitter.com/blog/planning-for-api-v1-retirement
Except this new widget creates an iframe, which prevents any custom styling of the widget from within my own stylesheets - such as setting the font family, font size, colours, etc.
除了这个新小部件创建了一个 iframe，它可以防止我自己的样式表中的小部件的任何自定义样式 - 例如设置字体系列、字体大小、颜色等。
Is there a workaround? From what I'm reading, you can't apply / inject styles into an iframe, and I can't find any API-way of doing it.
有解决方法吗？从我正在阅读的内容来看，您无法将样式应用/注入 iframe，而且我找不到任何 API 方式来执行此操作。
I'd also like to limit the widget to just the 3 most recent tweets; not sure if that's possible anymore, and to remove the vertical scroll bar (probably related to limiting the tweets).
我还想将小部件限制为 3 个最近的推文；不确定这是否可能，并删除垂直滚动条（可能与限制推文有关）。
回答by user2787001
Instead of targeting individualy the elements with jQuery you can try to inject some inline css style into the head of the page loaded inside the iframe, so new content loaded by the "show more" button will also be changed :
您可以尝试将一些内联 css 样式注入到iframe内加载的页面头部，而不是使用 jQuery 单独定位元素，因此“显示更多”按钮加载的新内容也将更改：
for example to remove avatars pictures :
例如删除头像图片：
$("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>');
I use the waituntilexists.jsplugin to detect when the content is added to DOM instead of the setTimeout(): https://gist.github.com/buu700/4200601
我使用waituntilexists.js插件来检测何时将内容添加到 DOM 而不是 setTimeout()：https: //gist.github.com/buu700/4200601
so we have :
所以我们有：
$("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>');
});
回答by Dominic Tancredi
The only solution I found with Twitter's Enhanced Timeline is to use javascript to modify the css after the iframe has loaded.
我在 Twitter 的 Enhanced Timeline 中找到的唯一解决方案是在 iframe 加载后使用 javascript 修改 css。
Needed to use window.setTimeout for it. As jamesnotjim mentioned, make sure you put this in the script block below the body tag.
需要为它使用 window.setTimeout。正如 jamesnotjim 提到的，请确保将其放在 body 标记下方的脚本块中。
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);
回答by robert.andre.brink
I can at least help with limiting the tweets and removing the scroll bar.
我至少可以帮助限制推文和删除滚动条。
From the documentation:
从文档：
Tweet limit:To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 Tweets.
推文限制：要将时间线的大小固定为预设数量的推文，请使用 data-tweet-limit="5" 属性和 1 到 20 条推文之间的任何值。
And
和
Chrome:Control the widget layout and chrome by using the data-chrome="nofooter transparent" attribute on the embed code. Use a space-separated set of the following options: noheader, nofooter, noscrollbar, transparent.
Chrome：通过在嵌入代码中使用 data-chrome="nofooter transparent" 属性来控制小部件布局和镶边。使用以空格分隔的以下选项集：noheader、nofooter、noscrollbar、transparent。
Still looking at the styling.
还在看造型。
回答by Milche Patern
You can import twitter-widget.js javascript in your own project, then modify some styling from within this .js file.
你可以在你自己的项目中导入 twitter-widget.js javascript，然后从这个 .js 文件中修改一些样式。
After, you invoke it instead of invoking the twitter's site library //your.ownsite.web/widgets.js. It is actually working, but no guaranties for the future.
之后，您调用它而不是调用 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>
In the .js, look for this block of code :
在 .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;
回答by a gorsky
Applying styles to the Twitter feed
将样式应用到 Twitter 提要
I would like to build on the answer provided by user2787001. I was finding that even with this approach (using waituntilexists.json the iframe) the styles were not always being applied. Waiting for the iFrame to load is significant as twitter loads this on the fly. However the iframe then has to load its content; the webpage containing the Twitter feed and should this take longer than expected we will again be trying to apply styles to something that is not there. Ultimately we want to check that the styles have actually been applied on the page within the iframe, only then can we be satisfied that the job is done.
我想以user2787001提供的答案为基础。我发现即使使用这种方法（在 iframe 上使用waituntilexists.js），也并不总是应用样式。等待 iFrame 加载很重要，因为 twitter 会即时加载它。但是 iframe 必须加载其内容；包含 Twitter 提要的网页，如果这需要比预期更长的时间，我们将再次尝试将样式应用于不存在的内容。最终，我们要检查样式是否已实际应用到 iframe 中的页面上，只有这样我们才能对工作完成感到满意。
To apply the styling I have referenced a standalone stylesheet containing the appropriate styles, using <link rel="stylesheet"... >. In order to make sure this has been successfully applied I have given it an id (#twitter-widget-styles) which can be checked to confirm the stylesheet has been placed.
为了应用样式，我引用了一个包含适当样式的独立样式表，使用<link rel="stylesheet"... >. 为了确保这已成功应用，我给了它一个 id ( #twitter-widget-styles)，可以检查它以确认已放置样式表。
Rather than using the waituntilexists.js plugin I have mimicked its behaviour by using window.setInterval. Do not usewindow.setTimeoutwith an arbitrary delay. It is quite possible the twitter iframe and its content will take longer to load than anticipated. If the delay is too short styles will fail to apply. If the delay is too long then your users are shown a flash of unstyled content (FOUC)
我没有使用 waituntilexists.js 插件，而是通过使用 .js 来模仿它的行为window.setInterval。 不要window.setTimeout随意延迟使用。推特 iframe 及其内容的加载时间很可能比预期的要长。如果延迟太短，样式将无法应用。如果延迟太长，那么您的用户会看到一闪而过的无样式内容 (FOUC)
(note: #twitter-widget-0is the id twitter uses on its iframe)
（注意：#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);
Limit number of checks
限制检查次数
One small consideration, if the iframe fails to load or the stylesheet never gets applied the timers will run indefinitely. If this is a concern counters can be added to quit the process after a certain number of attempts:
一个小小的考虑，如果 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);
Delay times (200ms in the example) and the break counters (40 cycles) can be altered as required.
延迟时间（示例中为 200 毫秒）和中断计数器（40 个周期）可以根据需要进行更改。
Cross domain restrictions
跨域限制
As for concerns regarding inserting code into an iframe. If we look at the iframe rendered by twitter it has no srcattribute that would pull content from another domain:
至于将代码插入 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>
I've not investigated this fully but I expect the iframe content is generated on the fly from the twitter script running on the client machine. Therefore interacting with it does not breech any cross domain restrictions.
我还没有对此进行全面调查，但我希望 iframe 内容是从客户端计算机上运行的 twitter 脚本动态生成的。因此，与其交互不会违反任何跨域限制。
Limiting number of tweets
限制推文数量
To limit the number of tweets use the data-tweet-limit="x"attribute on the anchor tag used on the embed code
要限制推文的数量，请使用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>...
This is discussed in the twitter documentation:
这在twitter 文档中进行了讨论：
Tweet limit: To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 Tweets. The timeline will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. Since the widget is of a fixed size, it will not poll for updates when using this option.
Tweet limit：要将时间线的大小固定为预设数量的 Tweets，请使用 data-tweet-limit="5" 属性和 1 到 20 Tweets 之间的任何值。时间线将从时间线渲染指定数量的推文，扩展小部件的高度以显示所有推文而无需滚动。由于小部件的大小是固定的，因此在使用此选项时它不会轮询更新。
Remove vertical scroll bars
删除垂直滚动条
I'd need to see your code to give a definite answer. There is an attribute that may solve your problem, again discussed in the twitter documentation, under the section "Chrome":
我需要查看您的代码才能给出明确的答案。有一个属性可以解决您的问题，在twitter 文档中的“Chrome”部分下再次讨论：
data-chrome="noscrollbar"
noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
noscrollbar：裁剪和隐藏主时间线滚动条（如果可见）。请考虑隐藏标准用户界面组件会影响您网站的可访问性。
CSS styling may also give control over scrollbars with options such as overflow: hidden.
CSS 样式还可以通过诸如overflow: hidden.
回答by Lemuel Botha
Go to this site and download this plugin, then you can style in anyway you chose Jason Mayes
转到此站点并下载此插件，然后您可以选择Jason Mayes 的任何样式
回答by Bikesh M
This is working for me
这对我有用
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
wiki.workassis.com
回答by user3903555
I've found that you can use document ready without the settimeout, provided you wrap the widget in a container. This should trigger not only on page load, but on any dynamic content changes in the timeline itself after page load.
我发现您可以在没有 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%");
});
});
Otherwise, I agree with a-gorsky regarding adding a stylesheet into the iframe rather than making the style changes to every element.
否则，我同意 a-gorsky 关于将样式表添加到 iframe 而不是对每个元素进行样式更改。
回答by t-readyroc
See "client side options" here. But basically, you can slap the whole thing in a styled div, remove the header & footer & make the background transparent. I'm personally still searching for a way to limit the number of tweets & get rid of the user icon.
请参阅此处的“客户端选项” 。但基本上，您可以将整个内容放在样式化的 div 中，删除页眉和页脚并使背景透明。我个人仍在寻找一种方法来限制推文数量并摆脱用户图标。
Here's our code (Drupal block): ok, I can't get the code to show nicely.
这是我们的代码（Drupal 块）： 好的，我无法很好地显示代码。
回答by ozzy
In the Microsoft MVC world there are helpers in the Microsoft.Web.Helpers library, specifically using:
在 Microsoft MVC 世界中，Microsoft.Web.Helpers 库中有帮助程序，特别是使用：
@Twitter.Profile(...
The above is just a wrapper around the V2 widget, but indicates there is a high usage of that particular widget.
以上只是 V2 小部件的包装，但表明该特定小部件的使用率很高。
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:
我已经研究了您的问题一段时间了（实际上是在弃用消息开始出现时），我得出了以下结论：
- The widget will not be deprecated due to its wide use
- If it is deprecated a far richer timeline widget will be available
- Failing this it will be the case of using the API and writing our own widgets, which will be a step back for Twitter
- 小部件不会因其广泛使用而被弃用
- 如果它被弃用了一个更丰富的时间线小部件将可用
- 如果失败，将是使用 API 并编写我们自己的小部件的情况，这将是 Twitter 的退步
