html - 如何在我的网页中嵌入 CodePen？

Question

我尝试将 CodePen(来自 codepen.io)添加到我的网页，但它没有按照我想要的方式显示。它只显示文本:'See the Pen ... on CodePen'。 The picture I added shows the embed window on CodePen.

如何正确嵌入 Pen，使其完全显示在我的网页上？抱歉，如果这是一个非常愚蠢的问题，我仍然是 HTML 的完全菜鸟。

Answer 1

要在本地使用它，替换

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

与

<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>

为什么？

如您所见，默认脚本的 src以 //assets... 开头.

他们删除了 URL 中的协议(protocol)，以便它自动匹配您自己的协议(protocol)。这是常见的做法，因为 https网站不允许使用 http 加载脚本网址。

因此，如果您的站点使用 http ，脚本将加载 http .如果您的网站使用 https , 它将加载 https .

但是如果您的网站不在服务器上，并且是用file:/// 打开的协议(protocol)，它不会在您的计算机上找到该资源，因此您需要指定要使用的协议(protocol)。