Twitter 小部件中的滚动元素

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>

内。这是由于一组称为“同源策略”的安全限制。 因此，不可能在小部件内自动滚动元素，因为它们绝对无法访问。

Twitter 提供了

一些自定义选项

，其中包括例如隐藏滚动条并操纵小部件尺寸，但恐怕无能为力。

Answer 2

另一种选择可能是在服务器端获取 twitter feed，在那里进行模板化，然后你的轮播代码可以变得漂亮和整洁：客户端工作更少意味着更好的性能。

无论哪种方式，您想要的 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 feed 作为嵌入元素呈现在自己的网站中时，我通常持相当消极的态度。在我看来，Twitter 的最佳体验是通过其本机应用程序，因为它们将跟上卡片、扩展对话等新功能的步伐。 Twitter是一个平台，而不仅仅是160个字符串的集合。当你尝试建立自己的 Twitter 代表的那一刻，就是你开始与之抗争的那一刻。

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

呼叫所有

Answer 3

！ 📣利用 X API 上的实时和历史数据进行创新。

开始使用 Pro👇

— 开发人员 (@XDevelopers)

2023 年 12 月 28 日

这是我的嵌入代码，在这个如何滚动滚动中我想要滚动，因为我的这个嵌入代码在一个div结构中，并且他的高度是固定的，所以尝试设置滚动条但找不到，所以我该如何解决请帮助我。