ดาวน์โหลด include fragment element Download - include fragment element ส่วนแฟรกเมนต์

include fragment element

ซอร์สโค้ดอื่น ๆ

v6.3.0

ดาวน์โหลด

<clusting-fragment> องค์ประกอบ

ฝั่งไคลเอ็นต์มีแท็ก

การติดตั้ง

 $ 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 แต่คุณอาจต้องการเปลี่ยนส่วนหัวที่ยอมรับเพื่อช่วยเจรจาต่อรองเนื้อหาที่เหมาะสมกับเซิร์ฟเวอร์

การโหลด

สิ่งนี้บ่งชี้ว่าควรดึงเนื้อหา เมื่อ ใด:

eager : ดึงข้อมูลและโหลดเนื้อหาทันทีโดยไม่คำนึงว่า <include-fragment/> อยู่ภายในวิวพอร์ตที่มองเห็นได้หรือไม่ (นี่คือค่าเริ่มต้น)
lazy : defers การดึงและโหลดเนื้อหาจนกว่าแท็ก <include-fragment/> ถึงระยะทางที่คำนวณได้จากวิวพอร์ต ความตั้งใจคือการหลีกเลี่ยงเครือข่ายและแบนด์วิดท์การจัดเก็บที่จำเป็นในการจัดการเนื้อหาจนกว่าจะมีความมั่นใจว่าจะต้องใช้

ข้อผิดพลาด

หาก URL ล้มเหลวในการโหลดองค์ประกอบ include-fragment จะถูกทิ้งไว้ในหน้าและติดแท็กด้วยคลาส CSS is-error ที่สามารถใช้สำหรับการจัดแต่งทรงผม

เหตุการณ์

การร้องขอเหตุการณ์วงจรชีวิตจะถูกส่งไปยังองค์ประกอบ <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> ใช้เทคนิคนี้เพื่อเลื่อนเนื้อหาเมนูการโหลดจนกว่าเมนูจะถูกเปิดเป็นครั้งแรก

รูปแบบ

การเลื่อนการแสดงมาร์กอัปมักจะทำในรูปแบบการใช้งานดังต่อไปนี้

การกระทำของผู้ใช้เริ่มต้นงานพื้นหลังที่ทำงานช้าบนเซิร์ฟเวอร์เช่นการสำรองไฟล์ที่เก็บไว้ในเซิร์ฟเวอร์ ในขณะที่งานสำรองกำลังทำงานแถบความคืบหน้าจะแสดงต่อผู้ใช้ เมื่อเสร็จสิ้นองค์ประกอบรวมการแบ่งส่วนจะถูกแทนที่ด้วยลิงก์ไปยังไฟล์สำรอง
ครั้งแรกที่ผู้ใช้เข้าชมหน้าเว็บที่มีมาร์กอัปที่ใช้เวลานานในการสร้างตัวบ่งชี้การโหลดจะปรากฏขึ้น เมื่อมาร์กอัปเสร็จสิ้นการสร้างบนเซิร์ฟเวอร์มันจะถูกเก็บไว้ใน MemCache และส่งไปยังเบราว์เซอร์เพื่อแทนที่ตัวโหลดรวม การเข้าชมหน้าต่อครั้งในหน้าแสดงมาร์กอัปแคชโดยตรงโดยไม่ต้องผ่านองค์ประกอบรวมถึงการแบ่งส่วน

ประเภทที่เชื่อถือได้ของ CSP

คุณสามารถเรียก setCSPTrustedTypesPolicy(policy: TrustedTypePolicy | Promise<TrustedTypePolicy> | null) จาก JavaScript เพื่อตั้งค่านโยบายประเภท 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 Fetches
คุณควรเรียก setCSPTrustedTypesPolicy() ก่อนการโหลดอื่น ๆ ของ include-fragment-element ในรหัสของคุณ
- หากนโยบายของคุณต้องการงานแบบอะซิงโครนัสในการสร้างคุณสามารถผ่าน Promise<TrustedTypePolicy>
- ผ่าน null เพื่อลบนโยบาย
เบราว์เซอร์ทั้งหมดไม่สนับสนุน API ประเภทที่เชื่อถือได้ใน JavaScript คุณอาจต้องการใช้ TinyFill ที่แนะนำเพื่อสร้างนโยบายโดยไม่ทำให้เกิดปัญหาในเบราว์เซอร์อื่น ๆ

ความสัมพันธ์กับฝั่งเซิร์ฟเวอร์รวมถึง

วิธีการประกาศนี้คล้ายกับคำสั่ง SSI หรือ ESI ในความเป็นจริงการใช้งานขอบสามารถแทนที่มาร์กอัปก่อนที่จะส่งมอบให้กับลูกค้า

 < include-fragment src =" /github/include-fragment/commit-count " timeout =" 100 " >
  < p > Counting commits… </ p >
</ include-fragment >

พร็อกซีอาจพยายามดึงและแทนที่ส่วนหากคำขอเสร็จสิ้นก่อนหมดเวลา มิฉะนั้นแท็กจะถูกส่งไปยังลูกค้า ห้องสมุดนี้ใช้เฉพาะด้านลูกค้า

การสนับสนุนเบราว์เซอร์

เบราว์เซอร์ที่ไม่มีการรองรับองค์ประกอบแบบกำหนดเองแบบดั้งเดิมต้องการโพลีฟิล เบราว์เซอร์มรดกต้องการโพลีฟิลด์อื่น ๆ อีกมากมาย ดู examples/index.html สำหรับรายละเอียด