延迟加载预填充嵌入

让我总结一下

• CodePen 具有 嵌入式笔。在 CodePen 上构建一个笔，并将其嵌入到任何其他网站上。
• 我们还提供 预填充嵌入，它消除了第一步。使用预填充嵌入，Pen 完全不需要存在于 CodePen 上。您可以通过页面上的代码块传递您希望在嵌入中显示的代码和设置（渐进增强！）。现在，该代码可以保存在您的 Git 存储库或数据库中，这可能会提供更理想的控制级别。
• Stephen Shaw 详细介绍了这些预填充嵌入 如何通过用户交互按需创建（例如，点击“运行此代码”按钮），因此它们仅在用户想要查看时才会出现。这是一种非常轻量级的方式，可以为任何博文或文档添加可选的交互性。

我将在本文中提供一个示例

<h1>Hello from HTML</h1>

html {
  background: black;
  color: white;
  text-align: center;
}

h1::after {
  content: " / CSS!";
}

document.querySelector("h1").innerText += " / JavaScript";

所有这些代码都位于本文中，并且嵌入式 Pen iframe 只有在您点击加载时才会加载，如果您有兴趣查看该代码的运行情况，您可能会这样做。

直接链接 →