Импорт файлов в html

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

Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.

Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.

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

Предлагаю вам ознакомиться с видео по данной теме.

Использование HTML импортов

Чтобы загрузить HTML файл, добавьте тэг link с import’ом в параметре rel и href, содержащий путь до нужного файла. К примеру, если вы хотите загрузить файл под названием component.html в index.html, то все должно выглядеть так:
index.html

Вы можете загружать любые ресурсы, включая скрипты, таблицы стилей и шрифты:
component.html

doctype, html, head, body необязательны. HTML импорты автомагически загрузят все указанные элементы, добавят их на страницу и запустят JavaScript, если имеется.

Порядок исполнения

Браузеры обрабатывают контент по порядку. Это означает, что script в начале HTML будет загружен раньше, чем то же самое, но в конце. Учтите, что некоторые браузеры ожидают завершения исполнения скрипта перед тем, как загружать следующие элементы.

Во избежание блокировки тэгом script оставшегося HTML можно использовать атрибуты async / defer (также можно переместить все скрипты в конец страницы). defer указывает на то, что код можно запустить лишь после загрузки HTML. async позволяет браузеру выполнять эти два действия параллельно.

Итак, как же работают импорты?

Скрипт внутри HTML импорта работает как обычный тэгscript с атрибутом defer. В примере ниже index.html запустит script1.js иscript2.js внутри component.html перед исполнением script3.js.
index.html

1. Загружается component.html из index.html и ожидает исполнения;
2. Загружается script1.js в component.html;
3. Загружается script2.js в component.html после script1.js;
4. Загружается script3.js в index.html после script2.js.

Заметьте, что добавление атрибута async в link[rel=»import»] расценивается как атрибут async в тэге script. Он не будет блокировать HTML. Это может потенциально улучшить производительность вашего проекта.

За рамками происходящего

На самом деле, HTML импорты не могут перенести полностью файл с другого источника. К примеру, вы не можете импортировать вhttp://example.com/ страницу http://webcomponents.org/.

Чтобы избежать этого ограничения, используйте CORS (Cross Origin Resource Sharing). Чтобы узнать больше об этой технологии, прочтите эту статью.

Объекты window и document в импортируемых файлах

Ранее я упоминал то, что импортируемые JavaScript будут запущены на странице. К сожалению, такое нельзя сказать об импортируемых HTML файлах. Чтобы такое происходило и с ними, надо дописать немножко скриптов.

Остерегайтесь того, что объект document в импортируемом файле будет ссылаться на страницу оригинала.

Используя написанный ранее код в качестве примера, заставим document в index.html и component.html ссылаться на document вindex.html.

Внесем небольшие изменения в наши файлы.
index.html

Для получения document из component.html дополните ваш код с document.currentScript.ownerDocument.
component.html

Если вы используете webcomponents.js, воспользуйтесь document._currentScript вместо document.currentScript. Нижнее подчеркивание в currentScript используется для поддержания браузеров, не способных работать с этим компонентом без использования сего знака.
component.html

Написав вот это в начале вашего скрипта, можно легко получить доступ к document из component.html, даже если браузер не поддерживает HTML импорты.

Вопросы производительности

Один из плюсов использования импортов — возможность самостоятельно распределить нагрузку страницы и порядок обработки импортируемых объектов. Но это еще и означает, что HTML код увеличится. Вообще, есть несколько пунктов для сравнения:

Зависимости

Что делать, если несколько вставляемых документов ссылаются на одну и ту же библиотеку? Например:

Вы загружаете jQuery в обоих документах, из-за чего при импорте этих документов библиотека в конечном документе будет исполнена дважды.
index.html

Данная проблема крайне легко решается в импортах.

В отличие от тэга script, объекты нашей статьи не загружают повторно один и тот же материал. Смотря на последний пример, достаточно обернуть тэг script HTML импортом, и данный ресурс не будет загружен дважды.

Но есть и другая проблема: теперь файлов для загрузки стало больше. Что делать, если таких будет не два, а гораздо больше?

К счастью, нам на помощь идет инструмент под названием «Vulcanize».

Объединение сетевых запросов

Vulcanize — инструмент объединения нескольких HTML файлов в один, с помощью чего число подключений к сети в целях загрузки необходимых документов сокращается. Вы можете установить его с помощью npm и использовать в командной строке. Также существуют аналоги для grunt и gulp, с помощью чего можно сделать «Vulcanize» частью вашего процесса сборки.

Для объединения файлов index.html используем следующий код:

При исполнении данной команды все зависимости index.html будут соединены в файле vulcanized.html.

Прочитать больше о данном инструменте можно здесь.

Сочетание импортов с Template, Shadow DOM и Custom Elements

Для тех, кто не знает о данных технологиях: С templates определение содержания пользовательского элемента может быть декларативным. С Shadow DOM styles, ID и classes элемента можно использовать немного иначе. С Custom Elements можно создать собственные HTML тэги. Неплохо, не так ли?

Объединение импортов с собственными веб-компонентами получит модульность и возможность многократного использования. Любой сможет их использовать, добавив лишь тэг link.
x-component.html

Обратите внимание, что объект document в x-component.html такой же, как и в index.html. Не нужно писать ничего сложного, все работает само и за вас.

Поддерживаемые браузеры

HTML импорты поддерживаются браузерами Chrome и Opera. Firefox на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».

Чтобы проверить данный метод на совместимость с конкретным браузером, посетите chromestatus.com или caniuse.com. Для добавления возможности работы этой технологии в других браузерах, воспользуйтесь webcomponents.js (ранее platform.js).

Ресурсы

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

Учимся использовать @import в CSS

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

Импорт в HTML

Чтобы воспользоваться правилом @import в HTML-файле , добавьте следующий код в шапку страницы:

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

В качестве альтернативного способа применения import url CSS в HTML можно сослаться на таблицу стилей следующим образом:

Эта ссылка работает по принципу @import , и позволяет управлять всем CSS-кодом с помощью отдельного файла. Данный метод предпочтительнее с точки зрения параллельной загрузки. Если вам все еще хочется распределить CSS по отдельным файлам, то можно воспользоваться @import внутри основного стилевого файла.

Импорт в CSS

Применение
в приведенном выше примере позволит внедрить файл « default.css » в HTML-страницу . Внутри этого CSS-файла находятся различные правила стилизации. Эти стили можно разместить как на одной странице, так и разбить их на отдельные фрагменты. А также импортировать в основной файл CSS .

Предположим, что мы используем четыре отдельных CSS-файла : один для разметки, второй для шрифтов и третий для картинок. Четвертым будет основной файл, в котором указаны ссылки на все остальные файлы. В самом верху основного файла ( так как правила импорта должны размещаться над всем остальным содержимым ) добавьте следующий код CSS import :

Уже после этих правил можно добавлять любой CSS-код для оформления страниц.

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

Используем @import в медиа-запросах

Разделение основного CSS-файла может пригодиться при адаптации сайта под мобильные устройства, где для разных разрешений и размеров экрана применяются различные стили. Главная проблема заключается в том, что подключения CSS import расположены в самом верху страницы, поэтому медиа-запросы будут загружены после стилей. При разработке адаптивных дизайнов важно учитывать производительность сайта. Рекомендуется не разделять CSS адаптивного сайта и использовать @import для их загрузки на ресурс.

Всегда ли нужно использовать @import?

Вовсе нет. На многих сайтах весь CSS расположен прямо в коде страниц, и в этом нет ничего страшного.

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

У старых браузеров наблюдаются некоторые проблемы поддержки правила CSS import , но сейчас этими версиями программ практически никто не пользуется. Времена Internet Explorer уже давно позади.

Данная публикация представляет собой перевод статьи « Using @import in Cascading Style Sheets » , подготовленной дружной командой проекта Интернет-технологии.ру

Импорт файлов в HTML

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

На момент написания статьи, технология импорта HTML является рабочим проектом W3C, а это значит, что она ещё не является веб-стандартом и пока не поддерживается во всех браузерах. Однако, HTML импорт можно уже сейчас использовать через Polymer.

HTML импорт как инструмент для повторного использования и агрегирования

Разработчики программного обеспечения, в том числе и веб-разработчики, стараются не дублировать код, а скорее распределять его по моделям, объектам, функциям. Благодаря разработчикам Дэйву Томасу и Эндрю Ханту, этот подход обычно называют DRY-разработкой или DRY-программированием, что значит в переводе с английского «не повторяй себя».

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

Для примера возьмём HTML-файл с названием messages.html:

Для повторного использования контента из messages.html, для начала включите документ через HTML импорт. Это осуществляется добавлением тега
с атрибутом rel, равным «import» и атрибутом href, принимающим значение messages.html:

Мы можем написать небольшой отрывок, используя JavaScript, который обращается к документу messages.html и загружает сообщения “success” на странице. Каждое из последующих сообщений (или все вместе) также могут быть загружены аналогичным образом, в зависимости от того, как вам хотелось бы использовать их. Вот код:

Данный код выполняет следующие задачи:

• Выбирает элемент link
• Импортирует файл
• Извлекает импортированный DOM
• Вставляет содержимое на страницу

Вот таким образом, сообщение “success” теперь включено на странице, подобно тому, как это работает через AJAX запрос.

Этот пример, конечно, крайне упрощён. Если бы содержание в messages.html было значительно сложнее, например, в несколько сотен строк HTML, JavaScript и CSS, то наш код импорта выглядел бы чуть сложнее.

В качестве второго примера рассмотрим, как языки программирования часто используются для загрузки повторно-используемого контента. В приведённом ниже примере из файла single.php появляется выбор окна приветствия для WordPress:

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

Аналогично тому, как скрипт PHP обращается к внешнему ресурсу, HTML импорт может быть использован для добавления содержимого. Эта аналогия может стать яснее, если учесть, что HTML импорт являются частью проекта HTML Web Components draft.

Допустим, что веб-компоненты имеют четыре составляющих блока. Эрик Байдельман, который работает в коммуникации с разработчиками в Google, а также представлял веб-компоненты в Googio I / O в 2013 и 2014 годах, описал их так:

• Shadow DOM (теневой DOM): работа с DOM и стилями;
• HTML Templates (HTML шаблоны): DOM фрагменты, для обеспечения базовой структуры кода;
• Custom Elements (пользовательские элементы) — собственные HTMLэлементы;
• HTML Imports (HTML импорт) – позволяют объединять веб-компоненты и повторно их использовать.

Учитывая всё вышеперечисленное, теперь вы можете себе представить, как можно использовать HTML импорт для улучшения загрузки различных компонентов HTML-страницы. К примеру данную технику можно применить в следующих случаях.

• Оплата через PayPal – используйте тег , и вы можете добавить безопасную возможность оплаты на любую страницу.
• Форма для E-mail подписки — используя HTML импорт, добавление формы подписки может быть также просто, как импортирование внешнего HTML документа и добавления тега .
• Карты Google — часто используемый пример импорта HTML, вставляем пользовательский элемент . Конечно, это сработает, только после того как будет загружен документ, определяющий специальный тег.

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

В данном примере, загружаем Bootstrap и его многочисленные файлы:

В bootstrap.html подключаем нужные файлы, как бы мы это сделали в разделе :

Браузерная поддержка

Как уже упоминалось выше, в настоящее время существует достаточно мало браузеров поддерживающих HTML импорт. Исключения — Chrome 36+, Chrome 37+ для Android и Opera 23+0.

Также существуют полизаполнения, которые делают эту функцию доступной практически в любом браузере. Самым надёжным является вышеупомянутый проект Polymer.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/introduction-html-imports-tutorial/
Перевел: Станислав Протасевич
Урок создан: 30 Сентября 2014
Просмотров: 15592
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

HTML5 Rocks

Localizations:

#include for the web

Localizations

Why imports?

Think about how you load different types of resources on the web. For JS, we have . .

Let this sit. It’s exciting stuff.

Load/error events

The
element fires a load event when an import is loaded successfully and onerror when the attempt fails (e.g. if the resource 404s).

Imports try to load immediately. An easy way avoid headaches is to use the onload / onerror attributes:

Notice the event handlers are defined before the import is loaded on the page. The browser tries to load the import as soon as it encounters the tag. If the functions don’t exist yet, you’ll get console errors for undefined function names.

Or, if you’re creating the import dynamically:

Using the content

Including an import on a page doesn’t mean «plop the content of that file here». It means «parser, go off an fetch this document so I can use it». To actually use the content, you have to take action and write script.

A critical aha! moment is realizing that an import is just a document. In fact, the content of an import is called an import document. You’re able to manipulate the guts of an import using standard DOM APIs!

link.import

To access the content of an import, use the link element’s .import property:

link.import is null under the following conditions:

• The browser doesn’t support HTML Imports.
• The
• doesn’t have rel=»import» .
• The
• has not been added to the DOM.
• The
• has been removed from the DOM.
• The resource is not CORS-enabled.

Full example

Let’s say warnings.html contains:

Importers can grab a specific portion of this document and clone it into their page:

Scripting in imports

Imports are not in the main document. They’re satellite to it. However, your import can still act on the main page even though the main document reigns supreme. An import can access its own DOM and/or the DOM of the page that’s importing it:

Example — import.html that adds one of its stylesheets to the main page

Notice what’s going on here. The script inside the import references the imported document ( document.currentScript.ownerDocument ), and appends part of that document to the importing page ( mainDoc.head.appendChild(. ) ). Pretty gnarly if you ask me.

A script in an import can either execute code directly, or define functions to be used by the importing page. This is similar to the way modules are defined in Python.

Rules of JavaScript in an import:

• Script in the import is executed in the context of the window that contains the importing document . So window.document refers to the main page document. This has two useful corollaries:
  • functions defined in an import end up on window .
  • you don’t have to do anything crazy like append the import’s

  Registering custom elements

  Custom Elements is another Web Component technology that plays absurdly well with HTML Imports. Imports can execute script, so why not define + register your custom elements so users don’t have to? Call it. «auto-registration».

  This import defines (and registers) two elements, and . The first shows a basic custom element that registers itself inside the import. The second example shows how to implement a custom element that creates Shadow DOM from a , then registers itself.

  The best part about registering custom elements inside an HTML import is that the the importer simply declares your element on their page. No wiring needed.

  In my opinion, this workflow alone makes HTML Imports an ideal way to share Web Components.

  Managing dependencies and sub-imports

  Sub-imports

  It can be useful for one import to include another. For example, if you want to reuse or extend another component, use an import to load the other element(s).

  Below is a real example from Polymer. It’s a new tab component (

  ) that reuses a layout and selector component. The dependencies are managed using HTML Imports.

  App developers can import this new element using:

  When a new, more awesome comes along in the future, you can swap out and start using it straight away. You won’t break your users thanks to imports and web components.

  Dependency management

  We all know that loading JQuery more than once per page causes errors. Isn’t this going to be a huge problem for Web Components when multiple components use the same library? Not if we use HTML Imports! They can be used to manage dependencies.

  By wrapping libraries in an HTML Import, you automatically de-dupe resources. The document is only parsed once. Scripts are only executed once. As an example, say you define an import, jquery.html, that loads a copy of JQuery.

  This import can be reused in subsequent imports like so:

  Even the main page itself can include jquery.html if it needs the library:

  Despite jquery.html being included in many different import trees, it’s document is only fetched and processed once by the browser. Examining the network panel proves this:

  jquery.html is requested once

  Performance considerations

  HTML Imports are totally awesome but as with any new web technology, you should use them wisely. Web development best practices still hold true. Below are some things to keep in mind.

  Concatenate imports

  Reducing network requests is always important. If you have many top-level import links, consider combining them into a single resource and importing that file!

  Vulcanize is an npm build tool from the Polymer team that recursively flattens a set of HTML Imports into a single file. Think of it as a concatenation build step for Web Components.

  Imports leverage browser caching

  Many people forget that the browser’s networking stack has been finely tuned over the years. Imports (and sub-imports) take advantage of this logic too. The http://cdn.com/bootstrap.html import might have sub-resources, but they’ll be cached.

  Content is useful only when you add it

  Think of content as inert until you call upon its services. Take a normal, dynamically created stylesheet:

  The browser won’t request styles.css until link is added to the DOM:

  Another example is dynamically created markup:

  The h2 is relatively meaningless until you add it to the DOM.

  The same concept holds true for the import document. Unless you append it’s content to the DOM, it’s a no-op. In fact, the only thing that «executes» in the import document directly is

  Depending on your app structure and use case, there are several ways to optimize async behavior. The techniques below mitigate blocking the main page rendering.

  Scenario #1 (preferred): you don’t have script in or inlined in

  Включить другой HTML-файл в HTML-файл

  у меня есть 2 HTML-файла, предположим a.html и b.html . В a.html Я хочу включить b.html .

  в JSF я могу сделать это так:

  это означает, что внутри a.xhtml файл, я могу включить b.xhtml .

  как мы можем сделать его в ?

  28 ответов

  на мой взгляд лучшее решение использует jQuery:

  этот метод является простым и чистым решением моей проблемы.

  jQuery .load() документация здесь.

  мое решение похоже на решение Лоло выше. Однако я вставляю HTML-код через документ JavaScript.напишите вместо использования jQuery:

  a.html:

  б.ДШ:

  причина для меня против использования jQuery заключается в том, что jQuery.js имеет размер

  90kb, и я хочу сохранить объем данных для загрузки как можно меньше.

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

  или просто используйте следующий удобный скрипт bash, опубликованный как Gist на Github, который автоматизирует всю необходимую работу, конвертируя b.html to b.js : https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

  кредиты Грег Minshall для улучшенной команды sed, которая также избегает обратных косых черт и одинарных кавычек, чего моя исходная команда sed не сделала считать.

  расширение ответа Лоло сверху, вот немного больше автоматизации, если вам нужно включить много файлов:

  и затем включить что-то в html:

  который будет включать представления/заголовок файла.html и представления / нижний колонтитул.HTML-код

  например:

  бесстыдный плагин библиотеки, которую я написал, решить это.

  выше будет принимать содержимое /path/to/include.html и заменить div С ним.

  простые серверные директивы include, чтобы включить другой файл в той же папке выглядит так:

  на очень старое решение тогда я удовлетворял свои потребности, но вот как это сделать, совместимый со стандартами код:

  нет необходимости в скриптах. Нет необходимости делать какие-либо причудливые вещи на стороне сервера (tho, что, вероятно, было бы лучшим вариантом)

  поскольку старые браузеры не поддерживают бесшовные, вы должны добавить css, чтобы исправить это:

  имейте в виду, что для браузеров, которые не поддерживают бесшовные, если вы нажмете ссылку в iframe, это сделает рама перейдите по этому url-адресу, а не по всему окну. Способ обойти это, чтобы иметь все ссылки target=»_parent» , Тхо браузер поддержка «достаточно хороша».

  в качестве альтернативы, если у вас есть доступ к интернет .htaccess файл на вашем сервере, вы можете добавить простую директиву, которая позволит php для интерпретации файлов, заканчивающихся В.расширение html.

  теперь вы можете использовать простой скрипт php для включения других файлов, таких как:

  следующие работы, если необходимо включить содержимое html из некоторого файла: Например, следующая строка будет содержать содержимое piece_to_include.html в месте, где происходит определение объекта.

  это то, что помогло мне. Для добавления блока html-кода из b.html to a.html , это должно пойти в head тег a.html :

  затем в теге body контейнер выполнен с уникальным идентификатором и блоком javascript для загрузки b.html в контейнер, следующим образом:

  вставить содержимое файла:

  например, на странице вы импортируете HTML-блок следующим образом:

  блок может иметь собственный импорт:

  импортер заменяет директиву загруженным HTML почти так же, как SSI

  эти директивы будут обслуживаться автоматически, как только вы загрузите этот небольшой JavaScript:

  он будет обрабатывать импорт, когда DOM будет готов автоматически. Кроме того, он предоставляет API, который вы можете использовать для запуска Вручную, для получения журналов и так далее. Наслаждайтесь 🙂

  ответ Atharis (первый!) было слишком убедительно! Очень Хорошо!

  но если вы хотите передайте имя страницы, которая будет включена в качестве параметра URL, этот пост имеет очень хорошее решение для использования в сочетании с:

  таким образом, это становится чем-то вроде этого:

  в a.html код теперь выглядит так:

  Он работал очень хорошо для меня! Надеюсь, помогли:)

  большинство решений не работает, но у них есть проблема с в jQuery:

  проблема заключается в следующем коде $(document).ready(function () < alert($("#includedContent").text()); >ничего не предупреждает вместо оповещения включенного содержимого.

  Я пишу приведенный ниже код, в моем решении вы можете получить доступ к включенному контенту в :

  (ключ загрузки содержания синхронно.)

  включить.inc:

  в w3.js включает такие работы:

  html5rocks.com имеет очень хороший учебник по этому вопросу, и это может быть немного поздно, но я сам не знал, что это существует. w3schools также имеет способ сделать это, используя свою новую библиотеку под названием w3.js. Дело в том, что для этого требуется использование веб-сервера и объекта HTTPRequest. Вы не можете загрузить их локально и протестировать на своем компьютере. То, что вы можете сделать, это использовать polyfills, предоставленные по ссылке html5rocks вверху, или следовать их учебнику. С маленький JS magic, вы можете сделать что-то вроде этого:

  это сделает ссылку (может измениться, чтобы быть желаемым элементом ссылки, если он уже установлен), установите импорт (если он у вас уже есть), а затем добавьте его. Затем он оттуда возьмет это и проанализирует файл в HTML, а затем добавит его к нужному элементу под div. Все это можно изменить в соответствии с вашими потребностями от добавляющего элемента до используемой ссылки. Я надеюсь, что это помогло, теперь это может не иметь значения, если новее, быстрее стороны вышли без использования библиотек и фреймворков, таких как jQuery или В3.js.

  обновление: это вызовет ошибку, говорящую о том, что локальный импорт был заблокирован политикой CORS. Может потребоваться доступ к deep web, чтобы иметь возможность использовать это из-за свойств deep web. (Не имея в виду практического применения)

  Я знаю, что это очень старый пост, поэтому некоторые методы были недоступны тогда. Но вот мой очень простой взгляд на это (основанный на ответе Лоло).

  он полагается на HTML5 data-* attributes и поэтому является очень общим в том, что использует функцию jQuery for-each для получения каждого .класс, соответствующий «load-html» и использует соответствующий атрибут «data-source» для загрузки содержимого:

  на данный момент нет прямого решения HTML для этой задачи. Даже импорт HTML (который постоянно в проекте) не будет делать вещь, потому что импорт != Включить и некоторые JS magic будут необходимы в любом случае.
  Я недавно написал a VanillaJS скрипт это просто для включения HTML в HTML, без каких-либо осложнений.

  просто поместите в свой a.html

  Это open-source и может дать идея (я надеюсь)

  вы можете сделать это с помощью библиотеки jQuery JavaScript следующим образом:

  обратите внимание: banner.html должен находиться под тем же доменом, что и другие ваши страницы, иначе ваши веб-страницы откажутся от из-за Совместное Использование Ресурсов Cross-Origin политика.

  кроме того, обратите внимание, что если вы загружаете свой контент с помощью JavaScript, Google не будет индексировать это не совсем хороший метод по причинам SEO.

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

  вы также можете попробовать Google Полимер

  на основе ответа https://stackoverflow.com/a/31837264/4360308 Я реализовал эту функциональность с Nodejs (+express + cheerio) следующим образом:

  HTML (index.html)

  JS

  добавить — > включает содержимое в div

  replace — > заменяет div

  вы можете легко добавить больше поведения после того же дизайна

  Я пришел к этой теме, ища что-то похожее, но немного отличающееся от проблемы, поставленной Лоло. Я хотел создать HTML-страницу, содержащую алфавитное меню ссылок на другие страницы, и каждая из других страниц может существовать или не существовать, а порядок их создания может не быть алфавитным (или даже числовым). Кроме того, как и Тафкадасох, я не хотел раздувать веб-страницу с помощью jQuery. После исследования проблемы и экспериментов в течение нескольких часов, вот что сработало для меня, с соответствующими замечаниями добавил:

  Если вы используете некоторые рамки, такие как django/bootle, они часто отправляют некоторый механизм шаблонов. Предположим, вы используете bottle, а механизм шаблонов по умолчанию -Двигатель SimpleTemplate. И ниже приведен чистый html-файл

  Вы можете включить нижний колонтитул.tpl в главном файле, например:

  кроме того, вы также можете передать параметр в свой dashborard.ТПЛ.

  PHP-это язык сценариев на уровне сервера. Он может делать много вещей, но одно популярное использование-включать HTML-документы внутри ваших страниц, почти так же, как SSI. Как и SSI, это технология уровня сервера. Если вы не уверены, есть ли у вас функциональность PHP на вашем сайте, обратитесь к хостинг-провайдеру.

  вот простой PHP-скрипт, который вы можете использовать для включения фрагмента HTML на любой веб-странице с поддержкой PHP:

  сохраните HTML для общих элементов вашего сайта, чтобы разные файлы. Например, раздел навигации может быть сохранен как навигация.html или навигация.РНР. Используйте следующий PHP-код, чтобы включить этот HTML на каждую страницу.

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

  Ну, если все, что вы хотите сделать, это поместить текст из отдельного файла на вашу страницу (теги в тексте тоже должны работать), вы можете это сделать (ваши стили текста на главной странице- test.html -надо еще работать):

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

  в любом случае, я начинаю использовать это для того, чтобы сделать это так, если я обновляю описание, распространенное среди множества HTML-файлов, мне нужно обновить только один файл ( .js file) вместо каждого HTML-файла, содержащего текст.

  Итак, в общем, вместо импорта .html файл, более простым решением является импорт .js файл с содержимым .html файл в переменной (и записать содержимое на экран, где вы вызываете сценарий.)