include fragment element
v6.3.0
客戶端包括標籤。
$ npm install --save @github/include-fragment-element
所有include-fragment元素都必須具有一個src屬性，從中可以從中檢索HTML元素片段。
如果無法立即獲取資源，則初始頁面負載應包括要顯示的後備內容。
import '@github/include-fragment-element'原來的
< div class =" tip " >
< include-fragment src =" /tips " >
< p > Loading tip… </ p >
</ include-fragment >
</ div >在頁面加載上， include-fragment元素獲取URL，將響應解析為HTML元素，該元素完全替代了include-fragment元素。
結果
< div class =" tip " >
< p > You look nice today </ p >
</ div >服務器必須用HTML片段響應以替換include-fragment元素。它不應包含另一個include-fragment元素，否則服務器將在無限循環中進行輪詢。
此屬性告訴<include-fragment/>作為提取請求的一部分，要發送什麼作為Accept標頭。如果省略，或者設置為空值，則默認行為將為text/html 。服務器對HTML響應很重要，但是您可能希望更改Accept Header，以幫助與服務器協商正確的內容。
這表明何時應獲取內容：
eager ：無論<include-fragment/>當前是否在可見的視口內（這是默認值），都會立即獲取和加載內容。lazy ：防禦器提取和加載內容，直到<include-fragment/>標籤達到與視口的計算距離。目的是避免使用網絡和存儲帶寬來處理內容，直到相當確定需要它為止。如果URL未能加載， include-fragment元素將留在頁面中，並標記為可用於樣式的is-error CSS類。
請求生命週期事件在<include-fragment>元素上派遣。
loadstart服務器獲取已啟動。load - 請求成功完成。error - 請求失敗。loadend請求已完成。include-fragment-replace （可取消） - 成功響應已被解析。它帶有event.detail.fragment ，它將替換當前元素。include-fragment-replaced - 該元素已被片段取代。 const loader = document . querySelector ( 'include-fragment' )
const container = loader . parentElement
loader . addEventListener ( 'loadstart' , ( ) => container . classList . add ( 'is-loading' ) )
loader . addEventListener ( 'loadend' , ( ) => container . classList . remove ( 'is-loading' ) )
loader . addEventListener ( 'load' , ( ) => container . classList . add ( 'is-success' ) )
loader . addEventListener ( 'error' , ( ) => container . classList . add ( 'is-error' ) )| 屬性 | 選項 | 描述 |
|---|---|---|
src | URL字符串 | 所需的URL加載替換HTML元素片段。 |
當src屬性在<include-fragment>元素上可用時，服務器的替換標記請求開始。當元素渲染時，大多數情況下，這將發生在頁面加載。但是，如果我們省略src屬性直到以後的時間，我們可以將內容加載。
<details-menu>元素元素使用此技術推遲加載菜單內容，直到首次打開菜單為止。
推遲標記顯示通常在以下使用模式中進行。
用戶操作開始在服務器上開始緩慢運行的後台作業，例如備份存儲在服務器上的文件。在運行備份作業時，向用戶顯示了一個進度欄。完成後，將Include-Fragment元素替換為備份文件的鏈接。
用戶第一次訪問一個包含耗時的標記的頁面時，會顯示加載指示器。當標記在服務器上完成構建時，它將存儲在memcache中，並發送到瀏覽器以替換Include-Fragment Loader。隨後訪問該頁面可直接呈現緩存的標記，而無需瀏覽包含碎片元素。
您可以調用javaScript的setCSPTrustedTypesPolicy(policy: TrustedTypePolicy | Promise<TrustedTypePolicy> | null)以設置CSP值得信賴的類型策略，該策略可以執行（同步）過濾或拒絕fetch響應，然後再將其插入到頁面上：
import IncludeFragmentElement from "include-fragment-element" ;
import DOMPurify from "dompurify" ; // Using https://github.com/cure53/DOMPurify
// This policy removes all HTML markup except links.
const policy = trustedTypes . createPolicy ( "links-only" , {
createHTML : ( htmlText : string ) => {
return DOMPurify . sanitize ( htmlText , {
ALLOWED_TAGS : [ "a" ] ,
ALLOWED_ATTR : [ "href" ] ,
RETURN_TRUSTED_TYPE : true ,
} ) ;
} ,
} ) ;
IncludeFragmentElement . setCSPTrustedTypesPolicy ( policy ) ;該策略可以訪問fetch響應對象。由於平台的限制，只能在策略中使用響應中的同步信息（除了HTML文本主體）：
import IncludeFragmentElement from "include-fragment-element" ;
const policy = trustedTypes . createPolicy ( "require-server-header" , {
createHTML : ( htmlText : string , response : Response ) => {
if ( response . headers . get ( "X-Server-Sanitized" ) !== "sanitized=true" ) {
// Note: this will reject the contents, but the error may be caught before it shows in the JS console.
throw new Error ( "Rejecting HTML that was not marked by the server as sanitized." ) ;
}
return htmlText ;
} ,
} ) ;
IncludeFragmentElement . setCSPTrustedTypesPolicy ( policy ) ;注意：
IncludeFragmentElement提取。include-fragment-element的負載之前調用setCSPTrustedTypesPolicy() 。Promise<TrustedTypePolicy> 。null以刪除策略。這種聲明的方法與SSI或ESI指令非常相似。實際上，邊緣實現可以在將標記實際交付給客戶端之前替換。
< include-fragment src =" /github/include-fragment/commit-count " timeout =" 100 " >
< p > Counting commits… </ p >
</ include-fragment >如果請求在超時之前完成，則代理可以嘗試獲取和替換片段。否則，標籤將交付給客戶端。該庫僅實現客戶端方面。
沒有本機自定義元素支持的瀏覽器需要多填充。舊式瀏覽器需要各種其他聚票。有關詳細信息，請參見examples/index.html 。
npm install
npm test
根據MIT許可分發。有關詳細信息，請參見許可證。
