Twitter 小部件并不总是加载

Question

我在网页上有一个像这样的基本 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 上留下 Link。我只是运行本地硬盘上的网页。它似乎与域限制无关，因为我也在此处部署了它：http://beta.thestickynote.com/ 并且问题继续出现。

站点可能会要求您提供 username/pass，只需使用此通用访客登录即可。

用户：测试版通过：thestickynote

是什么导致了这个问题？

Answer 1

此问题可能是由于您的浏览器的域限制导致的，以防止跨站点脚本。当运行在本地文件时，有时浏览器会认为每个文件都是自己的 "Domain"，因此它不允许页面从 Twitter 服务器提取数据。

发生这种情况时，回退是将 link 显示到您的 Twitter 帐户，如标记部分所示：

<a class="twitter-timeline" href="https://twitter.com/TheStickyNoteEd" data-widget-id="722809724224151554">Tweets by @TheStickyNoteEd</a>

更新

此问题可能与您使用 Turbolinks 有关。 Turbolinks 是一个 Javascript 库，它使页面加载速度更快，但它似乎破坏了 Twitter 小部件的功能，导致后备 link 出现。

更新 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 到 pre-render 我的页面。所以解决方案是将 <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 小部件并不总是加载

Twitter Widget Not Always Loading

javascript

html

turbolinks