懶惰的預填充嵌入

這是一個快速摘要：

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中文網其他相關文章！