懒惰的预填充嵌入

这是一个快速摘要：

Codepen为您的项目提供两种类型的嵌入：

• 标准嵌入式笔：这些简单使用。您可以在Codepen上创建一支笔，然后将其嵌入到您的网站上。

• 预填充嵌入：此高级选项消除了在Codepen上预先创建笔的需求。您可以使用代码块将HTML，CSS和JavaScript代码直接嵌入到网页中。这使您可以在自己的GIT存储库或数据库中管理代码，从而提供更大的控制。

斯蒂芬·肖（Stephen Shaw）演示了如何动态创建这些预填充嵌入。用户互动（例如单击按钮）会触发嵌入式的创建，使其成为一种轻巧的方法，可在文章或文档中添加可选的交互式元素。嵌入仅在需要时加载，优化页面加载时间。

让我们用一个例子说明：

<h1 id="来自HTML的您好">来自HTML的您好</h1>

html {
  背景：黑色；
  颜色：白色；
  文字平衡：中心；
}

h1 :: efter {
  内容：“ / css！”；
}

 document.queryselector（“ h1”）。innertext =“ / javaScript”;

上面的代码直接存在于本文中。 Codepen Iframe仅在选择查看运行代码时加载（例如，通过“运行此代码”按钮）。此方法可以使初始页面加载快速加载，仅在要求时添加交互元素。

直接链接→

以上是懒惰的预填充嵌入的详细内容。更多信息请关注PHP中文网其他相关文章！