Импорт отдельных HTML-ресурсов из внешнего файла

Question

Импорт отдельных HTML-ресурсов из внешнего файла

Допустим, у меня есть HTML-страница (assets.html), на которой есть несколько пользовательских элементов, таких как кнопки. Кнопки состоят из HTML / CSS и изображения.

Можно ли импортировать "assets.html" и "захватить" кнопку и клонировать / скопировать ее и поместить на страницу, которая обращалась к assets.html?

Я хочу, чтобы у меня была страница со множеством компонентов интерфейса, я мог загрузить эту страницу и получить любой компонент, который мне нужен.

Является ли это возможным? Какой метод будет гарантировать сохранение CSS и изображения в импортированном HTML?

2

javascript dynamic assets html5-template html-imports

Источник

user2296615 06 окт '16 в 17:43

1 ответ

Решение

Другие вопросы по тегам javascript dynamic assets html5-template html-imports

user4600982 08 окт '16 в 15:31 2016-10-08 15:31 · Accepted Answer · 2016-10-08 15:31

HTML импорт

Вы можете использовать HTML-импорт для импорта внешней HTML-страницы. Поместите ссылку в заголовок вашего основного документа.

<head>
    <link rel="import" href="assets.html" id="assets">
</head>

Импортированный документ анализируется при загрузке (и скрипты внутри него выполняются), но элементы не импортируются в дерево DOM. Вместо этого он хранится в виде HTML-документа.

Затем вы можете получить любые элементы в импортированном документе, используя import собственность <link> элемент. использование cloneNode(true) получить глубокую копию импортируемого актива.

<script>
    var importedDoc = document.querySelector( 'link#assets' ).import
    var button = importedDoc.querySelector( 'button#btn1' ).cloneNode( true )
</script>

Вы можете добавить клонированный элемент в основной документ, используя appendChild(),

Вы также можете импортировать <style> элемент для получения CSS-ресурсов:

document.head.appendChild( importedDoc.querySelector( 'style#st1' ).cloneNode( true ) )

Примечание. HTML Imports - это проект редактора W3C, изначально реализованный в Chrome и Opera. Для других браузеров есть полифилл из команды WebComponents.js.

HTML шаблон

Вы также можете импортировать несколько элементов одновременно, поместив их в <template>элемент. Клонироватьcontentсобственность<template> элемент:

<template id="templ1">
    <style>
       #btn2 { color: red ; }
    </style>
    Name: <input id="name1">
    <button id="btn2" onclick="alert('Hello '+name1.value)">Say Hello</button>
</template>

<script>
    var template = importedDoc.querySelector( '#templ1' )
    document.body.appendChild( template.content.cloneNode( true ) )
</script>

var template = document.querySelector( '#templ1' )
document.body.appendChild( template.content.cloneNode( true ) )

<template id="templ1">
    <style>
       button { color: red ; }
    </style>
    Name: <input id="name1">
    <button onclick="alert('Hello '+name1.value)">Say Hello</button>
</template>