Question

我正在尝试为我的Twitter小部件添加自动滚动效果。

我使用了Twitter提供的代码，将其添加到HTML页面，然后添加了一些Jquery插件代码（称为 Caroufredsel ）来处理此操作。

通过将函数启动从Document.ready更改为：

，我解决了函数调用后加载代码的问题。

<script>    
$(window).bind("load", function() {    
$(".h-feed").carouFredSel({
        items: 2,
        direction: "up",
        scroll : {
        items: 1,
        easing: "elastic",
        duration: 1000,             
        pauseOnHover: true
        }               
    }); 
});       
</script>

正如上面的代码所示，我试图找到一个带有“h-feed”类的列表元素，这是Twitter小部件自动生成的（ol）元素。我面临的问题是，当调用GetElementByClass()函数时，它在HTMLcontainer中返回null，表示没有找到任何元素！

有人可以帮我解决这个问题吗？我的完整代码在下面以供参考（抱歉格式错误，但第一部分是Twitter提供的小部件代码）：

<a class="twitter-timeline" href="https://twitter.com/NomadMadi" data-widget-id="384617889120010240">Tweets by @NomadMadi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>

Answer 1

即使您在Feed完成加载后调用您的函数，您也无法选择或操作.h-feed，因为此元素位于从其他域加载的<iframe>内。这是由于一组名为same origin policy的安全限制。

因此，无法自动滚动窗口小部件中的元素，因为它们绝对无法访问。

Twitter提供some customization options，其中包括隐藏滚动条并操纵小部件尺寸，但我担心不能再做任何事了。

Answer 2

您最好的选择是构建自己的twitter小部件版本。您将获得对它的更多控制权，并且您将不会遇到其他人提到的iframe问题，或者必须在弄清楚Twitter代码到达和运行的时间。

另一种选择可能是在服务器端获取Twitter提要，在那里模板化，然后你的轮播代码可以很好和整洁：在客户端的工作量减少意味着更好的性能。

无论哪种方式，您想要的API调用都是 https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name= NomadMadi＆amp; count = 10

文档所在的

https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

另一方面，Twitter的功能正在发生很大变化，当客户要求将Twitter Feed作为嵌入式元素呈现在他们自己的网站中时，我通常会相当消极。在我看来，Twitter最好通过它的原生应用程序体验，因为它们将与卡片，扩展对话等新功能保持同步。 Twitter是一个平台，而不仅仅是160个字符串的集合。你尝试构建自己的twitter表示的那一刻，就是你开始战斗它的那一刻。

所以撇开技术挑战，从设计的角度来看，我建议你不要尝试你的饲料定制，只需链接到相关时间线的推特页面，然后让人们跟随你使用他们自己喜欢的推特客户。当然，我对你的设计没有任何真实的背景，所以这个建议可能远远不够。

在Twitter小部件中滚动元素

2 个答案: