设置新的推特小部件(嵌入式时间轴)

Question

几天/几周前,我的一些网站的Twitter小工具停止了正确的数据传输.事实证明,版本2推特小部件已被弃用,而新的嵌入式时间轴小部件显然是唯一的出路.

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

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

有解决方法吗？从我正在阅读的内容来看,你不能将样式应用/注入iframe,我找不到任何API方式.

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

Answer 1

您可以尝试将一些内联css样式注入到iframe中加载的页面的头部,而不是使用jQuery单独定位元素,因此"show more"按钮加载的新内容也将被更改:

例如删除头像图片:

$("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>');     
});

Answer 2

我在Twitter的增强时间轴上找到的唯一解决方案是在iframe加载后使用javascript修改css.

需要使用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);

Answer 3

将样式应用到 Twitter 提要

我想以user2787001提供的答案为基础。我发现即使使用这种方法（在 iframe 上使用waituntilexists.js），也并不总是应用样式。等待 iFrame 加载很重要，因为 twitter 会即时加载它。但是 iframe 必须加载它的内容；包含 Twitter 提要的网页，如果这需要比预期更长的时间，我们将再次尝试将样式应用于不存在的内容。最终，我们要检查样式是否已实际应用到 iframe 中的页面上，只有这样我们才能对工作完成感到满意。

为了应用样式，我引用了一个包含适当样式的独立样式表，使用<link rel="stylesheet"... >. 为了确保这已成功应用，我给了它一个 id ( #twitter-widget-styles)，可以检查它以确认已放置样式表。

我没有使用 waituntilexists.js 插件，而是通过使用 .js 来模仿它的行为window.setInterval。 不要 window.setTimeout随意延迟使用。推特 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 文档中进行了讨论：

Tweet limit：要将时间线的大小固定为预设数量的 Tweets，请使用 data-tweet-limit="5" 属性和 1 到 20 Tweets 之间的任何值。时间线将从时间线渲染指定数量的推文，扩展小部件的高度以显示所有推文而无需滚动。由于小部件的大小是固定的，因此在使用此选项时它不会轮询更新。

删除垂直滚动条

我需要查看您的代码才能给出明确的答案。有一个属性可以解决您的问题，在twitter 文档中的“Chrome”部分下再次讨论：

data-chrome="noscrollbar"

noscrollbar：裁剪和隐藏主时间线滚动条（如果可见）。请考虑隐藏标准用户界面组件会影响您网站的可访问性。

CSS 样式还可以通过诸如overflow: hidden.

Answer 4

您可以在自己的项目中导入 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;