Как импортировать html в js

Как импортировать html файл в другой html файл c помощью JS/jQuery?

Как импортировать html файл в другой html файл c помощью JS/jQuery? Мне нужно избежать дублирования кода.

Отслеживать
68k 218 218 золотых знаков 79 79 серебряных знаков 221 221 бронзовый знак
задан 2 сен 2020 в 14:33
user405273 user405273
Что такое «jQwery»?
2 сен 2020 в 15:05
– user405273
2 сен 2020 в 15:34
А. jQuery, может?
2 сен 2020 в 15:39
Да, опечатка. Я не пойму, зачем задавать такой вопрос?
– user405273
2 сен 2020 в 16:13
Чокнитесь со своими фреймворками скоро. Банальные задачи решить не можете без сторонних библиотек.
4 сен 2020 в 15:43

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Существует огромное количество способов включить один HTML в другой.

Способы композиции можно разделить на основные типы по месту/времени отработки:

во время публикации (генератор статических сайтов, например Jekyll / GitHub Pages)
на сервере, при обработке запроса HTML (SSI
на клиенте (далее рассматривается она)

Если вам есть дело до SEO, то лучше проконсультироваться по поводу применимости композиции на клиенте.

Вариант с React-компонентом: если включается не документ с текстом, а интерактивный элемент (например калькулятор или корзинка), то его лучше не делать HTML-ем.

Вариант с jQuery с дополнительными запросом: $(«#content»).load(«menu.html»)

Вариант без библиотек с дополнительными запросом:

function include(selector,address) < fetch(address).then(resp =>resp.text()) .then(data => < document.querySelector(selector).innerHTML = data >) >

Вариант с js-bundler (например, в webpack loader): HTML при сборке (во время публикации) преобразуется в js-строку в составе бандла, который подгружается целиком.

Вариант с «Web Components»: в этом случае включаемый HTML больше изолирован.

Существует также множество вариаций этих и других способов.

HTML-импорт — include для веба: часть 1

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

От переводчика

Недавно я перевел статью по основам HTML Import. Я обещал, что если эта тема заинтересует хабра-сообщество, то переведу более подробную статью. Я решил разбить перевод на две одинаковые по размеру части, так как, по моему, на одну часть слишком много буков. Вторая часть выйдет спустя несколько дней после публикации этой части. Если, конечно, эта часть более-менее понравится хабра-сообществу.

Для чего нужен HTML-импорт?

Давайте поговорим о том, как мы загружаем различные ресурсы. JavaScript мы загружаем при помощи
Для CSS у нас есть
Для изображений
Для видео есть

xhr.responseType="document"

Начало работы

В наборе стандартов Web Components есть стандарт HTML Imports, который позволяет подключение HTML-документов друг в друга. В подключаемых HTML-документах разрешается Javascript и CSS, словом, все что .html обычно содержит. Это замечательный инструмент для загрузки пакетов HTML/CSS/JS кода.

Основы

Подключение документов происходит при помощи

Указанный URL, это расположение импорта(import location). Чтобы использовать импорт с другого домена, его расположение должно позволять междоменное разделение ресурсов(CORS):

Примечание: браузеры игнорируют повторные запросы на один и тот же URL. Это значит, что из одного адреса будет выполнена только одна загрузка сколько бы ни было подключений на странице

Проверка на поддержку браузером

Чтобы определить, поддерживается ли импорт, проверьте существует ли свойство

import

в элементах

function supportsImports() < return 'import' in document.createElement('link'); >if (supportsImports()) < // Good to go! >else < // Use other libraries/require systems to load files. >

Браузерная поддержка пока на ранней стадии(прим. переводчика: оригинал статьи опубликован 11 ноября 2013, теперь, наверное, другая ситуация с поддержкой). Chrome 31 первый браузер поддерживающий HTML-импорт. Chrome 36 обновлен до последней спецификации этой фичи. Вы можете включить поддержку импорта, отметив флаг «Включить экспериментальные функции веб-платформы» по адресу

about:flags

в Chrome Canary. Для других браузеров это пока не работает.

Примечание: Включение экспериментальных функций позволит использовать и другие полезные фичи веб-компонентов

Бандлинг ресурсов

HTML-импорт позволяет собирать пакеты HTML/CSS/JS кода, которые в свою очередь могут использовать другие пакеты. Этот простой, но мощный функционал, может пригодиться, если вы хотите импортированием одного ресурса предоставить другим программистам какую-то библиотеку или набор стилей. Также это полезно для поддержки модульности вашего приложения. Вы даже можете отдавать на импорт целые приложения. Только подумайте, чего можно добиться таким образом.

Вы сможете экспортировать целые пакеты веб содержимого всего одной линкой.

Bootstrap это хороший пример того, как мог бы пригодиться импорт компонентов. Бутстрап состоит из различных файлов (bootstrap.css, bootstrap.js и др.), использует JQuery (как импортируемый компонент), а в результате выдает инструменты для верстки. Разработчикам нравится возможность подключать те или иные модули, по мере необходимости. Но обычно мы идем простым путем, подключая все модули бутстрапа сразу.

Импорт был бы очень полезен при использовании таких пакетов, как Bootstrap. Вот как в будущем может выглядеть его подключение:

Нужно всего лишь добавить один линк импорта. Больше не нужно подключать кучу файлов, вместо этого весь Bootstrap завернут в файл bootstrap.html:

События load/error

После загрузки импорта
запускает событие

load

а в случае ошибки (например 404), событие

error

Импорт всегда загружается сразу же, в порядке нахождения тега

Отловить события загрузки можно при помощи атрибутов

onload/onerror

 function handleLoad(e) < console.log('Loaded import: ' + e.target.href); >function handleError(e)

Примечание: обработчики событий загрузки/ошибки нужно объявлять перед импортом, так как браузер загружает импорт в тот момент, когда встречает тег импорта. Если на момент импорта нет обработчика загрузки, в консоли выведется ошибка undefined function.

Вы, также, можете динамически создавать импорт:

var link = document.createElement('link'); link.rel = 'import'; link.href = 'file.html' link.onload = function(e) ; link.onerror = function(e) ; document.head.appendChild(link);

Использование содержимого импорта

Элемент импорта на странице не указывает браузеру, где размещать содержимое импорта. Он только говорит браузеру получить документ для его дальнейшего использования. Чтобы использовать содержимое импорта, нам нужно написать немного JS кода.

Вот он момент прозрения, импорт, это всего-лишь документ. На самом деле, содержимое импорта так и называется документ импорта(import document). А использовать результат импорта вы можете стандартными средствами DOM API!

link.import

Для получения содержимого импорта используется свойство .import элемента

link

var content = document.querySelector('link[rel="import"]').import;

Браузер не поддерживает импорт.
У элемента нет атрибута rel=»import» .
Объект не добавлен в DOM.
Или был удален из DOM
Ресурс не поддерживает CORS.

Полный пример

Допустим у нас есть страница warnings.html :

  h3 Warning!
 This page is under construction
 
 Heads up!
 This content may be out of date

Вы можете использовать только необходимую вам часть импортированной страницы:

Скрипты в импорте

Импорт работает не совсем, как часть документа, который его использует. Но вы, все же, можете работать с подключившей его страницей. Из импортированной страницы можно работать, как с внутренним DOM, так и с главным документом:

Пример — import.html добавляет один из своих стилей главному документу

   /* Примечание: Внутренние стили, по умолчанию применяются к импортирующему документу. Их не нужно явно добавлять в главную страницу. */ #somecontainer .

Итак, что здесь происходит? При помощи

document.currentScript.ownerDocument

мы получаем доступ к внутреннему элементу-корню импортированного документа и добавляем его кусок в главный документ (

mainDoc.head.appendChild(. )

). Это конечно бесполезный код, но нам он нужен, чтобы понять, что мы можем обращаться как к главному, так и ко внутреннему корню DOM.

Скрипты внутри импорта могут как сами исполнять код, так и предоставлять функции для выполнения в главном документе. Это похоже на модули в Питоне.

Код импорта выполняется в контексте содержащего его документа. Из этого исходят две удобные вещи:
- Функции объявленные в импорте содержатся в главном объекте window .
- Вам не нужно делать действий вроде добавления в главный документ тегов
Импорты

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Новая спецификация «HTML Imports» описывает, как вставить один документ в другой при помощи HTML-тега .

Зачем?

Мы ведь и так можем вставлять документ в документ, при помощи , зачем нужен ещё какой-то импорт? Что не так с iframe ?

…С iframe всё так. Однако, по своему смыслу iframe – это отдельный документ.
- Для iframe создаётся полностью своё окружение, у него свой объект window и свои переменные.
- Если iframe загружен с другого домена, то взаимодействие с ним возможно только через postMessage .
Это хорошо, когда нужно действительно в одной странице отобразить содержимое другой.

А что, если нужно встроить другой документ как естественную часть текущего? С единым скриптовым пространством, едиными стилями, но при этом – другой документ.

Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом – мы должны иметь возможность это сделать без «плясок с бубном».

Иначе говоря, – это аналог , но для подключения полноценных документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.

Пример вставки
- В отличие от тег может быть в любом месте документа, даже в .
- При вставке через документ показывается внутри фрейма. В случае с это не так, по умолчанию документ вообще не показывается.
HTML, загруженный через имеет отдельный DOM документа, но скрипты в нём выполняются в общем контексте страницы.

Файл, загруженный через , обрабатывается, выполняются скрипты, строится DOM документа, но не показывается, а записывается в свойство link.import .

Мы сами решаем, где и когда его вставить.

В примере ниже подключает документ timer.html и, после его загрузки, вызывает функцию show . Эта функция через link.import.querySelector(‘time’) выбирает интересующую часть подгружённого документа и вставляет её в текущий:
```
     
```
В файле timer.html находится элемент и скрипт, который его «оживляет»:
```
    var localDocument = document.currentScript.ownerDocument; var timer = localDocument.getElementById('timer'); var timerId = setInterval(function() < timer.innerHTML++; >, 1000);  
```
Добавление кода JavaScript в HTML

JavaScript (JS) – это язык программирования, используемый в веб-разработке. Наряду с HTML и CSS JavaScript является одной из основных технологий и используется для создания интерактивных веб-страниц и приложений. Современные веб-браузеры, которые придерживаются базовых стандартов отображения, поддерживают JavaScript через встроенные модули и не требуют дополнительных плагинов.

Создавая файлы приложения, JavaScript необходимо загружать и запускать вместе с разметкой HTML. Это можно сделать либо внутри HTML-документа, либо в отдельном файле, который браузер загрузит вместе с HTML-документом.

Данный манул научит внедрять JavaScript в HTML-документы и отдельные файлы программы.

Добавление JavaScript в HTML-документ

Чтобы вставить JavaScript в HTML-документ, используйте специальный тег , который охватывает код JavaScript.

Тег можно вставить в раздел и в или после закрывающего тега в зависимости от того, когда нужно загрузить JavaScript.

Как правило, код JavaScript размещается внутри раздела , что позволяет отделить его от основного содержимого документа HTML.

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

Рассмотрим следующий HTML-документ с заголовком Today’s Date.

На данный момент этот файл содержит только разметку HTML. Предположим, в документ нужно добавить следующий код JavaScript:

let d = new Date();
alert(«Today’s date is » + d);

Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.

Для этого нужно добавить тег и поместить в него код JavaScript.

Добавьте код JavaScript в раздел . В этом случае браузер будет обрабатывать JavaScript прежде остального содержимого страницы. Добавьте следующий код JavaScript в теги .

Загрузите страницу. На ней появится следующее предупреждение:

Today’s date is Thu Jun 29 2017 10:46:47 GMT-0400 (EDT)

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

Чтобы дата отображалась не в отдельном предупреждении, а прямо на странице, нужно добавить скрипт в раздел .

Today’s Date

Загрузите эту страницу в браузере. Теперь дата будет указана прямо в теле страницы.

Today’s date is Thu Jun 29 2017 14:04:45 GMT-0400 (EDT)

Небольшие скрипты и скрипты для одной страницы будут хорошо работать внутри HTML-документа. Но объемные скрипты, предназначенные для нескольких страниц, помещать в документ не очень эффективно. Такие скрипты будут лучше обрабатываться в отдельных файлах.

Отдельные файлы JavaScript

Большие скрипты JavaScript помещают в специальные файлы js, а затем ссылаются на них внутри HTML-документа. Подобный механизм используется в CSS.

Преимущества такого подхода:
- Разметку HTML и скрипты JavaScript проще читать по отдельности.
- Такой код проще поддерживать.
- Если JavaScript кэшируется, страницы будут быстрее загружаться.
Чтобы научиться связывать файлы JavaScript с HTML, создайте небольшой тестовый проект. Он будет состоять из таких файлов:
- script.js в каталоге js/,
- style.css в каталоге css/,
- главный файл index.html в корневом каталоге проекта.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html

Начать можно с файла index.html и шаблона, который мы рассмотрели в предыдущем разделе.

Затем перейдите к файлу script.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок .

let d = new Date();
document.body.innerHTML = «

Today’s date is » + d + «

«

Добавьте ссылку на этот скрипт в раздел или под ним:

Тег указывает на скрипт script.js в каталоге js/.

Теперь главный документ index.html будет выглядеть так:

Теперь отредактируйте файл style.css и укажите в нем цвет фона и стиль заголовка .

body background-color: #0080ff;
>
h1 color: #fff;
font-family: Arial, Helvetica, sans-serif;
>

После этого нужно сослаться на файл CSS в разделе HTML-документа index.html:

Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:

Today’s date is Thu Jun 29 2017 14:08:55 GMT-0400 (EDT)

На этот файл JavaScript могут ссылаться и другие HTML-документы.

Заключение

Теперь вы умеете внедрять код JavaScript в HTML-документы, создавать специальные файлы для скриптов JavaScript и ссылаться на них.

Читайте также:
- Написание комментариев в JavaScript
- Использование консоли разработчика JavaScript
Похожие публикации:

Как импортировать html в js

Как импортировать html файл в другой html файл c помощью JS/jQuery?

2 ответа 2

HTML-импорт — include для веба: часть 1

От переводчика

Для чего нужен HTML-импорт?

Начало работы

Основы

Проверка на поддержку браузером

Бандлинг ресурсов

События load/error

Использование содержимого импорта

link.import

Полный пример

Warning!

Heads up!

Скрипты в импорте

Импорты

Зачем?

Пример вставки

Добавление кода JavaScript в HTML

Добавление JavaScript в HTML-документ

Отдельные файлы JavaScript

Today’s date is » + d + «

Заключение

Добавить комментарий Отменить ответ