无法将推文嵌入 HTML

Unable to embed tweet into HTML

我正在尝试通过 this method

将推文嵌入我的网站

但我无法正确处理这是我的 HTML 标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<blockquote class="twitter-tweet" lang="en">
  <p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? <a href="http://t.co/E8dD01jGKX">http://t.co/E8dD01jGKX</a> <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>
  &mdash; SO em Português (@WhosebugPT) <a href="https://twitter.com/WhosebugPT/status/613791039539806208">June 24, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

我在浏览器中看到的是: 只是 html,不像 Twitter 嵌入式推文框的样式。

请帮忙。

Twitter widgets.js 的 link 是所谓的相对协议或无方案:它没有定义自己的 URI scheme 并使用其主机页面发生的任何内容被打开。这对于在不更改源代码中的 link 的情况下支持 httphttps 方案很有用。

现在,因为您正在使用本地文件进行测试,所以使用的方案是 file,对于与浏览器位于同一台计算机上的文件,即 specifically created。因此,无协议 //platform.twitter.com/widgets.js 获得 file 方案,并成为文件夹 platform.twitter.com 中的本地文件 widgets.js 的 link,您可能没有在你的机器上。

要解决这个问题,只需添加一个方案,httphttps,如下所示:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<body>
  <blockquote class="twitter-tweet" lang="en">
    <p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? <a href="http://t.co/E8dD01jGKX">http://t.co/E8dD01jGKX</a>  <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a>
    </p>
    &mdash; SO em Português (@WhosebugPT) <a href="https://twitter.com/WhosebugPT/status/613791039539806208">June 24, 2015</a>
  </blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <!--                 ^                -->
</body>

</html>