javascript - Twitter 嵌入式时间轴小部件

Question

我继续下载 http://platform.twitter.com/widgets.js

还有 http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

嵌入式时间轴小部件使用的两个文件。

我想做的就是自定义小部件的 css，因为 Twitter 只给你一些设计选项，比如链接颜色和深色/浅色主题，我认为下载文件和修改会更容易他们我自己。

唯一的问题是，我在尝试将 widgets.js 中的 css 文件位置指向我的 webapp 上的副本时遇到了一些困难

widget.js 中的一行，将 css 文件定位在推特服务器上，它与一些组合前缀 平台的变量相关联。 twitter.com/ 值(value)什么的

provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",

我不知道需要对 widget.js 进行多少编辑，但我猜它只有几行？

如果任何精通 javascript 的人不介意看一看并告诉我“不值得努力”，或者“这很简单，只需将 __ 更改为 __” , 让我知道。

widgets.js is the first hyperlink above

Answer 1

(请参阅下面我的编辑以获得更好的解决方案)这似乎对我有用并且不需要太多时间来实现:

在widgets.js中，找到

function Z(a,b,c)

在函数 Z 中更改它:

d.href=twttr.widgets.config.assetUrl()+"/"+b

像这样:

d.href=b

assetUrl 仅获取文件(例如 CSS 文件)的基本 URL，该文件位于 Twitter 拥有的域中。 b 将是您在整个 JS 中指定的路径(例如 embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css )。将所有 CSS(如 timeline.xyz.default.css)上传到您想要的位置，然后您可以自定义这些文件并将它们保存在您自己的服务器上。您不能通过简单地将规则添加到服务器上的 CSS 文件来修改 CSS，因为 Twitter 提要位于来自不同域的 iframe 中。不允许使用此类源(即不是来自您自己的域)修改 iframe 中的 CSS，以防止劫持类型的问题，但如果 iframe 引用您自己服务器上的 CSS，则您可以修改内容。

您可能还需要检查一些其他事项，以确保您拥有所有必需的文件。您还应该获得在 Twitter CSS 文件中引用的 sprite.png。我能够通过这种方式自定义 CSS，并且效果很好。

编辑:

我在 IE7/6 和 Chrome 中的 Jelly Bean 中遇到了上述解决方案的问题，因此找到了一个更好的解决方案，让您可以将自己的自定义 CSS 文件注入(inject)到 iframe 中，同时坚持在他们自己的域中使用所有 Twitter 的 CSS。我从一个新的 widgets.js 中添加了以下内容:

;d=c.createElement("link"),
d.id="custom-css-1",
d.rel="stylesheet",
d.type="text/css",
d.href="http://mydomain.com/css/timeline.custom.css";
c.getElementsByTagName("head")[0].appendChild(d);

紧接着

c.getElementsByTagName("head")[0].appendChild(d)

在 widgets.js 开头的行上

provide("tfw/widget/timeline"

(再次在函数 Z 中)这似乎工作得更好，您所需要的只是位于 http://platform.twitter.com/widgets.js 的 widgets.js 副本。 .