Age*_*ame 5 html javascript turbolinks
我在网页上有一个像这样的基本 Twitter 小部件：
<div class="twitter mobile-hide">
<a class="twitter-timeline" href="https://twitter.com/TheStickyNoteEd" data-widget-id="722809724224151554">Tweets by @TheStickyNoteEd</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>
</div>
有时，小部件会消失，只留下 Twitter 的链接。我只是在我的硬盘上本地运行网页。它似乎与域限制无关，因为我也在这里部署了它： http: //beta.thestickynote.com/并且问题仍然发生。
该网站可能会要求您提供用户名/密码，只需使用此通用访客登录即可。
用户：beta 通行证：thestickynote
什么可能导致这个问题？
我遇到了同样的问题，因为我使用 Next.js 来预渲染我的页面。所以解决方案是将其放入我的html<script/>中<head></head>。
import Head from "next/head";
const TwitterWidget = () => {
return (
<div>
<Head>
<script
async
src="https://platform.twitter.com/widgets.js"
charSet="utf-8"
></script>
</Head>
<a
className="twitter-timeline"
href="https://twitter.com/_THE_TIMLINE_URL_"
>
Tweets by _SOMEONE_
</a>
</div>
);
};
export default TwitterWidget;
不是这样的：
const TwitterWidget = () => {
return (
<div>
<a
className="twitter-timeline"
href="https://twitter.com/_THE_TIMLINE_URL_"
>
Tweets by _SOMEONE_
</a>
<script
async
src="https://platform.twitter.com/widgets.js"
charSet="utf-8"
></script>
</div>
);
};
export default TwitterWidget;
此问题可能是由浏览器的域限制引起的，以防止跨站点脚本编写。在本地运行文件时，有时浏览器会将每个文件视为自己的“域”，因此不允许页面从 Twitter 服务器提取数据。
发生这种情况时，后备方法是显示指向您的 Twitter 帐户的链接，如标记部分所示：
<a class="twitter-timeline" href="https://twitter.com/TheStickyNoteEd" data-widget-id="722809724224151554">Tweets by @TheStickyNoteEd</a>
更新
此问题可能与您使用 Turbolinks 有关。Turbolinks 是一个 Javascript 库，可以使页面加载速度更快，但它似乎破坏了 Twitter 小部件的功能，导致出现后备链接。
更新2
当 AJAX 获取页面时，不会加载内联 Javascript，这会导致小部件无法加载。