Question

我在网页上有这样一个基本的Twitter Widget：

<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/并且问题仍然存在。

该网站可能会要求您提供用户名/通行证，只需使用此通用访客登录即可。

用户：测试通过：thestickynote

可能导致此问题的原因是什么？

Answer 1

此问题可能是由浏览器的域限制导致的，以防止跨站点脚本。在本地运行文件时，浏览器有时会将每个文件视为自己的“域”，因此不允许页面从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，这导致窗口小部件无法加载。

Answer 2

我在创建小部件时遇到了类似的问题。在Twitter开发论坛上咨询后，我阅读了一个解决方案，在脚本末尾添加twttr.widgets.load();，我看到你的小部件代码没有。也就是说，尝试使用

<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"); twttr.widgets.load();</script>
</div>

Answer 3

我遇到了同样的问题，因为我正在使用Next.js来预渲染我的页面。因此解决方案是将<script/>放在我的html的<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小部件并不总是正在加载

3 个答案: