include fragment element
v6.3.0
클라이언트쪽에는 태그가 포함됩니다.
$ npm install --save @github/include-fragment-element
모든 include-fragment 요소에는 HTML 요소 조각을 검색 할 수있는 src 속성이 있어야합니다.
초기 페이지로드에는 자원을 즉시 가져올 수없는 경우 폴백 컨텐츠가 표시되어야합니다.
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로 응답하는 것이 중요하지만 서버와의 올바른 콘텐츠를 협상하기 위해 허용 헤더를 변경할 수 있습니다.
이것은 내용을 가져와야하는 시기를 나타냅니다.
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 문자열 | 교체 HTML 요소 조각을로드하는 데 필요한 URL. |
서버의 교체 마크 업 요청은 <include-fragment> 요소에서 src 속성을 사용할 수있게되면 시작됩니다. 대부분 종종 요소가 렌더링 될 때 페이지로드에서 발생합니다. 그러나 나중에 src 속성을 생략하면 컨텐츠로드를 전혀 연기 할 수 있습니다.
<details-menu> 요소는이 기술을 사용하여 메뉴가 처음 열릴 때까지로드 메뉴 컨텐츠를 연기합니다.
마크 업 표시를 연기하는 것은 일반적으로 다음 사용 패턴으로 수행됩니다.
사용자 작업은 서버에 저장된 파일을 백업하는 것과 같이 서버에서 느리게 실행되는 배경 작업을 시작합니다. 백업 작업이 실행되는 동안 진행 막대가 사용자에게 표시됩니다. 완료되면 포함 전제 요소가 백업 파일에 대한 링크로 대체됩니다.
사용자가 처음으로 시간이 많이 걸리는 마크 업을 포함하는 페이지를 방문하면 로딩 표시기가 표시됩니다. 마크 업이 서버에서 빌드를 마치면 Memcache에 저장되어 브라우저로 보내어 포함 전용 로더를 교체합니다. 이 페이지의 후속 방문은 포함 전제 요소를 통과하지 않고 캐시 된 마크 업을 직접 렌더링합니다.
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 지침과 매우 유사합니다. 실제로 Edge 구현은 실제로 클라이언트에게 전달되기 전에 마크 업을 대체 할 수 있습니다.
< include-fragment src =" /github/include-fragment/commit-count " timeout =" 100 " >
< p > Counting commits… </ p >
</ include-fragment >프록시는 요청이 타임 아웃 전에 완료되면 조각을 가져오고 교체하려고 시도 할 수 있습니다. 그렇지 않으면 태그가 클라이언트에게 전달됩니다. 이 라이브러리는 클라이언트 측면만을 구현합니다.
기본 사용자 정의 요소 지원이없는 브라우저에는 폴리 필이 필요합니다. 레거시 브라우저에는 다른 다양한 폴리 필이 필요합니다. 자세한 내용은 examples/index.html 참조하십시오.
npm install
npm test
MIT 라이센스에 따라 배포됩니다. 자세한 내용은 라이센스를 참조하십시오.
