Twitter 小部件中的滚动元素答案

【问题标题】：Scrolling Elements in Twitter widgetTwitter 小部件中的滚动元素
【发布时间】：2013-10-06 03:30:57
【问题描述】：

我正在尝试向我的 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>

【问题讨论】：

您的问题是您正在 window.load 上寻找 .h-feed，此时尚未检索到 twitter 提要。你需要在 twitter 脚本完成后调用你的脚本。
我尝试将滚动功能的执行延迟3秒，加载完所有HTML代码后执行，仍然没有找到元素！
你是怎么耽误的？常见的错误是在选择器之后使用 .delay() 。这将不起作用，因为它仍会在延迟操作之前查找元素。您不想延迟对您的函数的调用，您只想在完成 twitter 提要请求时调用您的函数。一旦推文加载，他们应该有一个回调
抱歉刚刚快速搜索了一个回调，看起来他们没有，除非它在这篇文章之后发生了变化：dev.twitter.com/discussions/13264 你可以尝试按照建议查看 DOM 操作事件，但这很粗略。
@MadiD。能否请您提供一个 jsfiddle 或指向正在运行的源的链接？

标签： javascript jquery twitter uiscrollview widget

【解决方案1】：

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

因此，无法在小部件内自动滚动元素，因为它们绝对不可访问。

Twitter 提供some customization options，包括例如隐藏滚动条和操纵小部件尺寸，但恐怕无能为力了。

【讨论】：

【解决方案2】：

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

另一种选择可能是在服务器端获取 twitter 提要，在那里对其进行模板化，然后您的轮播代码可以漂亮而整洁：客户端的工作越少意味着性能越好。

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

文档在这里https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

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

因此，抛开技术挑战不谈，从设计的角度来看，我建议您根本不要尝试自定义提要，只需链接到相关时间线的 twitter 页面，然后让人们使用他们自己喜欢的 twitter 关注您客户。当然，我对你的设计没有任何真实的背景，所以这个建议可能离题很远。

【讨论】：