设计新的twitter窗口小部件（嵌入时间轴） [英] Styling the new twitter widget (embedded timeline)

问题描述

几天/几周前，我的一些网站的twitter小部件停止正常提取数据。原来版本2的twitter部件已被弃用，新的​​嵌入式时间轴部件是唯一可行的方法。

https://dev.twitter.com/blog/planning-for-api-v1-retirement

除了这个新的窗口部件创建一个iframe，阻止任何自定义样式的小部件从我自己的样式表，如设置字体，字体大小，颜色等。

有解决方法吗？从我正在阅读的，你不能应用/注入样式到iframe，我找不到任何API的方式做。

d也喜欢将窗口小部件仅限于最近的3条tweets;不确定这是否可能，并删除垂直滚动条（可能与限制tweets相关）。

解决方案

使用jQuery定位个性化的元素，您可以尝试将一些内联CSS样式插入到在 iframe 内加载的页面的头部，因此由显示更多按钮加载的新内容也将更改： / p>

例如删除头像图片：

  $（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>'）; 
}）; 
  

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.

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.

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.

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).

解决方案

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 :

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.js plugin to detect when the content is added to DOM instead of the 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>');     
});

这篇关于设计新的twitter窗口小部件（嵌入时间轴）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！