javascript - Twitter 小部件并不总是加载

标签 javascript html turbolinks

我在网页上有一个像这样的基本 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/并且问题仍然存在。

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

用户:beta 通过:thestickynote

什么可能导致此问题?

最佳答案

我遇到了同样的问题,因为我使用 Next.js 来预渲染我的页面。 所以解决方案是把 <script/>里面<head></head>我的 html。

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;

关于javascript - Twitter 小部件并不总是加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36852946/

相关文章:

javascript - 如何防止在动态表单上触发多个重复事件?

javascript - 2 个 JavaScript 之间可能存在冲突/冲突吗?

javascript - 从没有 ID 的其他女儿访问女儿 DIV

javascript - Turbolinks 导致 "jquery-ujs has already been loaded!"错误

javascript - 如果任何 div 有 Class through alert

javascript - 如何将背景轮播图片变小

ruby-on-rails - Pages#home 中的 Rails ExecJS::ProgramError?

javascript - AngularJS - 引用 $route 服务的导航 Controller

javascript - 导航到无序列表中的上层列表元素

python - 纯 Python Tidy 类应用程序/库