设计新的 twitter 小部件(嵌入式时间线) [英] Styling the new twitter widget (embedded timeline)

问题描述

几天/几周前，我的一些网站的 Twitter 小部件停止正确提取数据.事实证明，第 2 版 Twitter 小部件已被弃用，而新的嵌入式时间线小部件显然是唯一的出路.

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-退休

除了这个新小部件会创建一个 iframe，它可以防止我自己的样式表中的小部件的任何自定义样式 - 例如设置字体系列、字体大小、颜色等.

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，而且我找不到任何 API 方式来执行此操作.

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.

我还想将小部件限制为仅显示 3 条最近的推文；不确定这是否可行，并删除垂直滚动条(可能与限制推文有关).

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

推荐答案

您可以尝试将一些内联 css 样式注入到 iframe，因此显示更多"按钮加载的新内容也将发生变化:

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 :

例如删除头像图片:

$("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

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

所以我们有:

$("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屋！