Html как загрузить код из другого файла

Импортировать HTML код из другого файла в код

Вам придется сделать запрос по url и результат запроса вставить в html.

var xhr= new XMLHttpRequest(); xhr.open('GET', 'x.html', true); xhr.onreadystatechange= function() < if (this.readyState!==4) return; if (this.status!==200) return; // or whatever error handling you want document.getElementById('y').innerHTML= this.responseText; >; xhr.send(); 

$(function() < $('#loadContent').load('page1.html'); >); 

Отслеживать
ответ дан 16 ноя 2017 в 12:19
1,917 13 13 серебряных знаков 22 22 бронзовых знака

• javascript
• html

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Что такое HTML импорт и как это работает?

Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.

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

Введение в HTML импорт

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

Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)

Обходные пути

Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram’ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.

Начнём

Базовый синтаксис

Прежде чем смотреть примеры, давайте глянем на синтаксис подгрузки файла через тег импорта. Импорт, это новый тип link тега, так что должно быть нетрудно понять следующую строчку:

Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.

Базовый пример

Чтобы импорт сработал, страницы должны находиться на одном и том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:

      
Hello from Designmodo
   

Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.

Внутри intro.html

Что же внутри импортированной страницы?

 
We're an awesome blog about web design
 
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
 
 

Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.

Вставка импортированного HTML

Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’

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

      
Hello from Designmodo
    

Переходим на следующий уровень

Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега

 внутри элемента. Хорошо то, что scoped стили действуют только внутри элемента, в котором они заданы, а не во всем документе. Посмотрим, как атрибут scoped может помочь при работе с импортированными HTML-файлами. 
 
Добавим h1 в импортированный документ, чтобы увидеть разницу между стилями импортированного файла и стилями index.html. Потом добавим стиль элементам импортированного HTML документа. Как видите находится внутри импортированной разметки, а не в head теге. Благодаря scoped, стили применятся только к h1 внутри импортированной разметки. 
 
 
 h1 < color: red; >p About us 
We're an awesome blog about web design
 
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
 
 

Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.

Это немного похоже на Bootstrap

Bootstrap, это набор отдельных файлов, как bootstrap.css, boostrap.js и тд. Для плагинов, используется jQuery; Bootstrap предоставляет примеры верстки. Он очень гибок и прост в использовании. Суть Bootstrap в том, что вы можете использовать только необходимые для вашего проекта файлы. Большинство людей загружают все файлы сразу, и это тоже нормально. Идея HTML импорта та же, вы подключаете файлы по мере надобности. Эта логика становится популярной, из-за ускорения загрузки и упрощения организации.

Заключение

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

Html как загрузить код из другого файла

В прошлой статье код javascript непосредственно определялся на веб-странице. Но есть еще один способ подключения кода JavaScript, который представляет вынесение кода во внешние файлы и их подключение с помощью тега

Итак, в прошлой теме мы создали html-страницу index.html , которая находится в каталоге app . Теперь создадим в этом каталоге новый подкаталог. Назовем его js . Он будет предназначен для хранения файлов с кодом javascript. В этом подкаталоге создадим новый текстовый файл, который назовем main.js . Файлы с кодом javascript имеют расширение .js . То есть у нас получится следующая структура проекта в папке app :

Откроем файл main.js в текстовом редакторе и определим в нем следующий код:

document.write("
Первая программа на JavaScript
"); // выводим заголовок document.write("Привет мир!"); // выводим обычный текст

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

Для совместимости с кодировкой страницы index.html для файла с кодом javascript также желательно устанавливать кодировку utf-8. При работе в Visual Studio Code этот редактор автоматически устанавливает кодировку UTF-8.

Теперь подключим этот файл на веб-страницу index.html :

Чтобы подключить файл с кодом javascript на веб-страницу, применяется также тег , у которого устанавливается атрибут src . Этот атрибут указывает на путь к файлу скрипта. В нашем случае используется относительный путь. Так как веб-страница находится в одной папке с каталогом js, то в качестве пути мы можем написать js/main.js .

Также надо учитывать, что за открывающим тегом script должен обязательно следовать закрывающий

И после открытия файла index.html в браузере отобразится сообщение:

В отличие от определения кода javascript вынесение его во внешние файлы имеет ряд преимуществ:

• Мы можем повторно использовать один и тот же код на нескольких веб-страницах
• Внешние файлы javascript бразуер может кэшировать, за счет этого при следующем обращении к странице браузер снижает нагрузка на сервер, а браузеру надо загрузить меньший объем информации
• Код веб-страницы становится «чище». Он содержит только html-разметку, а код поведения хранится во внешних файлах. В итоге можно отделить работу по созданию кода html-страницы от написания кода javascript

Поэтому, как правило, предпочтительнее использовать код javascript во внешних файлах, а не в прямых вставках на веб-страницу с помощью элемента script.

Асинхронная загрузка и отложенное выполнение

Нередко веб-страницы имеют сложную структуру, какие-то блоки на html-странице, где подключаются файлы javascript, формируются динамически, что может усложнять управление файлами javascript. И для управления загрузкой файла с кодом JavaScript браузер предоставляет два атрибута: async и defer .

Атрибут async гарантирует, что обработка HTML-кода не будет приостановлена, когда браузер встретит элемент . Файл JavaScript загружается асинхронно (отсюда и название атрибута — async ). В этом случае HTML-код продолжает обрабатываться до тех пор, пока не будет загружен соответствующий файл JavaScript. Когда будет загружен файл JavaScript, обработка HTML останавливается, и начинает выполняться загруженный файл JS. После выполнения кода JavaScript продолжается обработка HTML.

Пример применения атрибута async :

Атрибут defer также гарантирует, что обработка HTML-кода не будет приостановлена. С другой стороны, исходный код JavaScript выполняется только после полной обработки HTML-кода. Таким образом, выполнение кода JavaScript откладывается (отсюда и название — defer (в переводе на английский).

Пример применения атрибута defer :

Как загрузить html код из файла?

iframe подойдет?
Если нет, то какими-то другими языками или инструментами пользоваться можно? SSI, например?

Решения вопроса 0
Ответы на вопрос 6
Иван @LiguidCool
Ответ написан более трёх лет назад
Нравится 1 2 комментария
Stalker_RED @Stalker_RED
Хотя этим импортам больше двух лет, как стандарт они не приняты и работают только в хроме и опере.
Придумают же.
xmoonlight @xmoonlight
https://sitecoder.blogspot.com

2.Anywhere use includeHTML as HTML tag:

Ответ написан более трёх лет назад
Нравится 1 8 комментариев

Сергей delphinpro @delphinpro Куратор тега HTML

Без использования php и javascrip.

xmoonlight @xmoonlight

Сергей: ну как я понял: без доп. кодирования на JS.
Иначе — пока никак. Родной include от W3C — вроде в драфте только.

xmoonlight: а подключенные этим способом странички не могут использовать сторонний js или jquery ??
xmoonlight @xmoonlight

. Shadow: могут, но это нужно указывать сразу в корневом файле. а не в загружаемых HTML. В загружаемых — только разметка, а все обработчики — должны находиться в корневом файле и быть загружены заранее.

xmoonlight: а если все файлы в одной директории что и сам штмл ? Я могу образец скинуть — подскажете что я сделал не так ?