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

Question

我尝试将 CodePen（来自 codepen.io）添加到我的网页，但它没有按照我想要的方式显示。它仅显示文本：“在 CodePen 上查看笔...”。我添加的图片显示了 CodePen 上的嵌入窗口。

如何正确嵌入笔，使其完全显示在我的网页上？抱歉，如果这是一个非常愚蠢的问题，我仍然是 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 中的协议，以便它自动匹配您自己的协议。这是常见的做法，因为https站点不允许使用httpURL 加载脚本。

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

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