include fragment element

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 , как часть запроса Fetch. Если опущены или если установить на пустое значение, поведение по умолчанию будет text/html . Важно, чтобы сервер отвечал на HTML, но вы можете изменить заголовок Accept, чтобы помочь согласовать правильный контент с сервером.

загрузка

Это указывает, когда содержимое должно быть извлечено:

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 .
Вы должны позвонить в setCSPTrustedTypesPolicy() перед любой другой нагрузкой, include-fragment-element в код.
- Если сама ваша политика требует асинхронной работы для построения, вы также можете передать Promise<TrustedTypePolicy> .
- Пропустите null , чтобы удалить политику.
Не все браузеры поддерживают API Trusted Types в JavaScript. Вы можете использовать рекомендованную TinyFill для построения политики, не вызывая проблем в других браузерах.

Отношение к стороне сервера включает

Этот декларативный подход очень похож на директивы SSI или ESI. Фактически, реализация Edge может заменить разметку, прежде чем она фактически доставлена клиенту.

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

Прокси может попытаться принести и заменить фрагмент, если запрос завершится до тайм -аута. В противном случае тег доставлен клиенту. Эта библиотека только реализует аспект клиента.

Поддержка браузера

Браузеры без собственной поддержки пользовательских элементов требуют многофиль. Наследие браузеры требуют различных других полифиллов. См. examples/index.html для получения подробной информации.