Javascript Twitter嵌入式时间线小部件

我继续下载

和

嵌入式timeline小部件使用的两个文件

我所要做的就是定制小部件的css，因为twitter只提供了一些设计选项，比如链接颜色和暗/亮主题，我想下载文件并自己修改它们会更容易

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

widget.js中的一行，定位twitters服务器上的css文件，它与一些组合前缀platform.twitter.com/值的变量相关联

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

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

如果任何精通javascript的人都不介意看一眼并告诉我“不值得努力”，或者“很简单，只需将更改为”，请告诉我

widgets.js是上面的第一个超链接

（请参阅下面的编辑以获得更好的解决方案）这似乎对我很有效，并且不需要花费太多时间来实施：

在widgets.js中，找到

function Z(a,b,c)

在函数Z中更改此选项：

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

对这样的事情：

d.href=b

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

您可能还需要签出一些其他内容，以确保您拥有所有必需的文件。您还应该获得twittercss文件中引用的sprite.png。我能够以这种方式定制CSS，它工作得很好

编辑：

我对IE7/6中的上述解决方案和Jelly Bean中的Chrome存在问题，因此找到了一个更好的解决方案，让您可以将自己的自定义CSS文件注入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中）这似乎工作得更好，您所需要的只是一份widgets.js的副本。

看起来如果我下载wigdet.js和custom.css，那么widget就不会出现 数据chrome=“透明”

我下载了

将其重命名为timeline.custom.css

在wigdet.js中更改了指向我的css的链接

function b(e,t,n){
            var r;
            n=n||document;
            if(n.getElementById(e))return;
            r=n.createElement("link"),
            r.id=e,r.rel="stylesheet",
            r.type="text/css",
            r.href= "../css/timeline.custom.css",
            n.getElementsByTagName("head")[0].appendChild(r)
        }

链接到css正确吗？或者twitter使用最新版本的css？

如何使小部件拾取数据chrome=“透明”

我使用了小部件脚本

<a class="twitter-timeline"    
data-dnt="true"  
href="https://twitter.com/search?q=%23My_hush"                          
data-tweet-limit="1"
data-theme="dark" 
data-screen-name="some_name"                        
data-chrome="noscrollbar noheader transparent noborders nofooter"                        
      data-widget-id="My_id">
      Tweets about "#My_hush"</a> 

我尝试过这种方法，我认为它非常出色，但我无法让它发挥作用。在对一个干净的JS文件进行编辑之后，我得到了一个看似空白的页面。然而，仔细观察，我发现它正在生成iframe，twitter和定制css都已附加，脚本似乎正在运行，但没有实际输出。页面没有出现错误，我感到困惑。一步一步地通过调用，肯定是编辑的行打断了它，有什么见解吗？该页面位于：（在适当的情况下替代www.doubleu doubleu dot manatee.k12.fl.us/sites/title1/edlinI找出了是什么解决了Twitter提要空白的问题，这有望解决您的问题。我在上面所做的更改（通过重新创建元素，而不仅仅是重用在原始widgets.js文件中创建的元素）修复了它。只有当自定义CSS文件的路径不正确时，才会发生这种情况。您是否已检查以确保自定义CSS的路径是可访问的？