Javascript вставить текст из другого файла
Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.
Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.
HTML импорты позволяют загружать ресурсы как совокупность нескольких файлов этого типа.
Предлагаю вам ознакомиться с видео по данной теме.
Использование 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
component.html
- Загружается component.html из index.html и ожидает исполнения;
- Загружается script1.js в component.html;
- Загружается script2.js в component.html после script1.js;
- Загружается script3.js в index.html после script2.js.
За рамками происходящего
Чтобы избежать этого ограничения, используйте 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
component1.html
component2.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 на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».
Ресурсы
Итак, мы рассмотрели HTML импорты. Если вам хочется еще больше углубиться в эту тему, то можно заглянуть сюда:
Файл index.html обрабатывается силами web-сервера и автоматически загружается в браузер пользователя при обращении к сайту (главной странице).
Файл index.html имеет классическую разметку документа:
Задача
Также мы хотим сделать эту загрузку в фоне, без перезагрузки страницы index.html . То есть пользователь не увидит в адресной строке браузера другого адреса. Перезагрузки страницы не будет.
Файл text.html имеет разметку:
Предпосылки. Зачем это нужно?
Каждая отдельная страница сайта перестаёт быть статичной (уже собранной). В результате, мы разделяем потенциальную страницу на части. Например:
- Один документ отвечает за шапку сайта
- Другой за подвал
- Третий за основное содержимое
- Четвёртый за боковые панели
- Пятый за рекламные баннеры
- Шестой за галерею фотографий
- Седьмой за контактную информацию
- и т. п..
Решение задачи
Для начала подключим на страницу index.html файл со скриптом, который будет называться gettext.js .
В файле index.html внутри элемента <head> поместим элемент <script> с атрибутом src и его значением gettext.js
Логика работы такая:
- Посылаем запрос на сервер.
- Дожидаемся ответа. Ловим содержимое файла.
- Вносим нужные изменения в документ.
Отредактируем файл gettext.js
- пустая строка (по умолчанию),
- arraybuffer
- blob
- document
- json
- text
Восьмая строка инициирует запрос на сервер методом send() и отправляет его.
Результат работы
Мы видим итоговую страницу с нужным нам содержимым. На favicon не обращаем внимания т. к. браузер Chrome вдруг решил его поискать.
title в разметке title на вкладке
В инструментах разработчика на вкладке Network мы видим последовательность загрузки данных для главной страницы сайта
В ответе сервера браузер уже понимает пришедшие данные и подсвечивает HTML-синтаксис, указывая на элементы <h1> и <p> . То есть браузер уже сам разобрал пришедший тип данных string и подсветил разработчику открывающиеся и закрывающиеся элементы.
У меня есть 2 HTML файлы, предположим , что a.html и b.html . В a.html хочу включить b.html .
В JSF я могу сделать это так:
Это значит, что внутри a.xhtml файла я могу включить b.xhtml .
Как мы можем сделать это в *.html файле?
На мой взгляд, лучшее решение использует jQuery:
Этот метод является простым и чистым решением моей проблемы.
Документация по jQuery .load() находится здесь .
@RodrigoRuiz $(function()<>) будет выполняться только после окончания загрузки документа. Если к включенному HTML-файлу прикреплен CSS, это может испортить стиль вашей страницы. Я точно такой же, как вы упомянули. Я использую bootstrap и перезаписываю css для B.html. Когда я использую B.html в A.html, чтобы он стал заголовком A.html, я вижу, что CSS потерял свой приоритет и имеет другой макет. Какие-нибудь решения для этого?Расширяя ответ lolo сверху, мы добавим немного больше автоматизации, если вам нужно включить много файлов:
А затем включить что-то в HTML:
Который будет включать в себя файлы views / header.html и views / footer.html
Очень полезный. Есть ли способ передать аргумент через другой параметр данных, например, data-argument и получить его во включенном файле? Небольшое предложение - вам не нужно class="include" - просто сделайте свой селектор jQuery var includes = $('[data-include]'); не работает в chrome с локальными файлами «Запросы перекрестного происхождения поддерживаются только для протокольных схем: htt»Мое решение похоже на одну из Лоло выше. Тем не менее, я вставляю HTML-код через JavaScript document.write вместо использования jQuery:
a.html:
b.js:
Причина, по которой я против использования jQuery, заключается в том, что размер файла jQuery.js составляет
90 КБ, и я хочу, чтобы объем загружаемых данных был как можно меньшим.
Чтобы получить правильно экранированный файл JavaScript без особых усилий, вы можете использовать следующую команду sed:
Благодарность Грегу Миншаллу за улучшенную команду sed, которая также избегает обратной косой черты и одинарных кавычек, которые моя первоначальная команда sed не учитывала.
В качестве альтернативы для браузеров, которые поддерживают литералы шаблона, также работает следующее:
b.js:
@TrevorHickey Да, вы правы, это недостаток моего решения, и это не очень элегантно. Однако, поскольку вы можете вставить '\' с простым регулярным выражением в конце каждой строки, это работает для меня лучше всего. Хм . может быть, я должен добавить к своему ответу, как сделать вставку с помощью регулярных выражений . О, боже, это ужасно - нет, спасибо. Я предпочел бы написать свой HTML как HTML. Мне все равно, могу ли я использовать sed в командной строке - я не хочу полагаться на это каждый раз, когда меняю содержимое шаблона. @Goodra Он должен работать на любом HTML без ' пометок в нем. Если вы просто выполняете поиск / замену, чтобы заменить ` with \ `THEN, найти / заменить, чтобы заменить ' на \ \' и новые строки на` `новые строки, это будет работать нормально. @ wizzwizz4: Благодаря Грегу команда sed теперь также избегает одинарных кавычек и обратной косой черты. Кроме того, я добавил скрипт bash, который сделает всю работу за вас. :-) Вы можете использовать обратные пометки ` - тогда вы сможете вставлять выражения, как $ - вам нужно только бежать \` и \$Например:
Импорт HTML не предназначен для непосредственного включения контента на страницу. Код в этом ответе stuff.html доступен только в качестве шаблона на родительской странице, но вам придется использовать сценарии для создания клонов его DOM на родительской странице, чтобы они были видны пользователю. По-видимому, не готов на конец 2016 года в FireFox (45.5.1 ESR). JS консоль говорит: TypeError: . .import is undefined . MDN говорит: «В настоящее время эта функция не реализована ни в одном браузере». Кто-нибудь знает, возможно ли построить FF с этой функцией? Firefox не будет поддерживать это. Чтобы включить его, попробуйте установить «dom.webcomponents.enabled». Он будет работать только в Chrome и Opera, Android с обновляемым веб-представлением (начиная с 4.4.3). Браузеры Apple не поддерживают его. Это похоже на хорошую идею для веб-компонентов, но пока еще не реализовано широко. Обновление в конце 2018 года: импорт HTML, по-видимому, почему-Бесстыдная заглушка библиотеки, которую я написал, решает эту проблему.
Выше будет взять содержимое /path/to/include.html и заменить div его.
Будет ли это оценивать JavaScript, если в include.html он встроен? @ Кажется, это не так. Я собираюсь поиграть с SRC и посмотреть, смогу ли я сделать это сделать. Благодаря Brilliant . Кажется, ваше единственное решение ЗАМЕНЯЕТ тег div, используемый в качестве токена для того, куда вставлять. Я собираюсь изучить источник позже! :-) спасибо, что это работает, он включает в себя HTML / CSS, но не Javascript из исходных файлов. Вы просто должны включить его снова, где вы используете <div data-include="/path/to/include.html"></div> . Этот инструмент упрощает создание простого многостраничного макета без плагинов.Простая серверная директива include для включения другого файла, найденного в той же папке, выглядит следующим образом:
Вам необходимо настроить сервер для использования SSI Включение SSI значительно замедляет работу Web-сервера (поэтому его следует избегать до полной необходимости).Нет необходимости в скриптах. Нет необходимости делать какие-то навороченные вещи на стороне сервера (хотя это, вероятно, будет лучшим вариантом)
Имейте в виду, что для браузеров, которые не поддерживают бесшовные, если вы нажмете на ссылку в iframe, это заставит фрейм перейти на этот URL, а не на все окно. Чтобы обойти все ссылки, нужно target="_parent" , чтобы поддержка браузера была «достаточно хорошей».
кажется, что он не применяет CSS-стили с родительской страницы, например. @ Рэнди Так? Это можно считать плюсом (особенно для пользовательского контента и т. П.). В любом случае, вы легко можете снова включить файлы css, не отправляя другой запрос из-за кэширования. Отвечал на мои потребности в ответе на этот вопрос - как включить HTML-файл в другой HTML-файл . Это лучший ответ без JQuery или сценариев. Хороший bjb568 спасибо! seamless Атрибут был удален из HTML проекта он пришел. Не используйте это.Очень старое решение я встретил мои потребности тогда, но вот как это сделать соответствующий стандартам код:
Спасибо за внимание, @ TomášPospíšek. Я больше не могу редактировать свой комментарий, но, надеюсь, ваш ответ предоставит читателю необходимую оговорку. Чтобы было ясно, последнее предложение (об seamless атрибуте) является единственной устаревшей частью - остальное все еще применяется.В качестве альтернативы, если у вас есть доступ к файлу .htaccess на вашем сервере, вы можете добавить простую директиву, которая позволит интерпретировать php для файлов, заканчивающихся расширением .html.
Теперь вы можете использовать простой PHP-скрипт для включения других файлов, таких как:
Да, это очень плохой совет. HTML-файлы статичны и очень быстро обслуживаются Apache. Если вы добавите все html-файлы в анализатор php только для того, чтобы включить файлы, у вас будет много проблем с производительностью на ваших серверах. Путь javascript (jQuery или простой JS) не очень хорошие решения, но они все еще более эффективны и менее опасны, чем этот. @ Gfra54 Вы имеете в виду, что у нас будут проблемы с производительностью, если мы будем использовать Apache только для этого, и мы не будем выполнять php-работу для сайта? Или это замедлится, если я использую php и эту вещь вместе? Внимание! Добавление этих строк .htaccess может привести к тому, что html страницы будут пытаться загружаться в виде файлов, а не в браузере. Проверьте сначала. Отказ от ответственности: это только что произошло со мной, когда я попробовал вышеуказанное решение. Мой .htaccess был пуст за исключением двух строк выше. Предостережение рекомендуется. Попробуйте использовать lolo решение jQuery (ниже). Человек, я усложнял себя, хотя я делал это раньше. Спасибо за напоминание. Для нужных мне целей это не сильно влияет на производительность, поэтому я крут. Ха, этот сокрушительный ответ - потрясающий пример нестандартного мышления. Я бы никогда не предложил это, но, возможно, спасатель, когда вам нужно немного кувалды php. :-)Если требуется включить html-контент из какого-либо файла, выполните следующие действия: Например, следующая строка будет содержать содержимое piece_to_include.html в месте, где происходит определение OBJECT.
Работает как шарм, и это самое чистое решение. Это должен быть принятый ответ. Согласен. Только одно замечание: не пытайтесь делать самозакрывающийся тег объекта. Текст после него будет удален.Вот мое решение на месте:
В w3.js include работает так:
Если вы хотите знать, когда документ был загружен, вы можете поместить его в конец документа: <img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument ()' style = 'display: none;'> Умный трюк а?Это то, что помогло мне. Для добавления блока HTML-кода из b.html в a.html , это должно идти в head теге a.html :
Затем в теге body создается контейнер с уникальным идентификатором и блоком javascript для загрузки b.html в контейнер следующим образом:
Чем этот ответ отличается от принятого ответа на этот вопрос? @MohammadUsman Здесь контейнер и код javascript находятся в теге body, тогда как принятый ответ помещает их в тег head и оставляет контейнер только в теге body.Я знаю, что это очень старый пост, поэтому некоторые методы не были доступны тогда. Но вот мой очень простой взгляд на это (основываясь на ответе Лоло).
Он опирается на атрибуты data- * HTML5 и, следовательно, очень универсален в том смысле, что использует функцию jQuery for-each для получения каждого .class, соответствующего «load-html», и использует соответствующий ему атрибут «data-source» для загрузки содержимого:
Например, на странице вы импортируете HTML-блок следующим образом:
Блок может иметь собственный импорт:
Импортер заменяет директиву загруженным HTML почти так же, как SSI
Эти директивы будут обслуживаться автоматически, как только вы загрузите этот небольшой JavaScript:
Он будет обрабатывать импорт, когда DOM будет готов автоматически. Кроме того, он предоставляет API, который вы можете использовать для запуска вручную, для получения журналов и так далее. Наслаждаться :)
В любом месте в теле. Может быть рекурсивно размещен в содержании включенных файлов Конечно, я сделал. Я фактически использовал это в течение многих лет. Почему спрашиваешь? Любые проблемы? Таким образом, «ключ» к этому, script async src кажется. Опробовать это!Большинство решений работает, но у них есть проблема с jquery :
Я пишу код ниже, в моем решении вы можете получить доступ к включенному контенту в $(document).ready функции:
(Ключ загружает включенный контент синхронно).
index.htm :
include.inc :
При использовании этого и последующем просмотре источника страницы из браузера вы видите только скрипт. Разве это не влияет на способность поисковых систем анализировать ваш сайт, в конечном итоге разрушая любые попытки SEO? Опять же, каждый метод на основе JavaScript делает это.Чтобы вставить содержимое именованного файла:
Ответ Athari (первый!) Был слишком убедительным! Отлично!
Но если вы хотите передать имя страницы для включения в качестве параметра URL , этот пост имеет очень хорошее решение для использования в сочетании с:
Так это становится примерно так:
Код a.html теперь становится:
Это сработало очень хорошо для меня! Надеюсь помогло :)
Это создаст ссылку (может измениться на требуемый элемент ссылки, если он уже установлен), установить импорт (если он у вас еще не установлен), а затем добавить его. Затем он возьмет это и проанализирует файл в HTML, а затем добавит его к нужному элементу в div. Все это можно изменить в соответствии с вашими потребностями, начиная с добавляемого элемента и заканчивая ссылкой, которую вы используете. Я надеюсь, что это помогло, теперь это может не иметь значения, если появятся более новые и более быстрые способы без использования библиотек и сред, таких как jQuery или W3.js.
ОБНОВЛЕНИЕ: Это выдаст ошибку, говорящую, что локальный импорт был заблокирован политикой CORS. Может потребоваться доступ к Deep Web, чтобы иметь возможность использовать это из-за свойств Deep Web. (Не имеет практического смысла)
у меня есть 2 HTML-файла, предположим a.html и b.html . В a.html Я хочу включить b.html .
в JSF я могу сделать это так:
это означает, что внутри a.xhtml файл, я могу включить b.xhtml .
как мы можем сделать его в ?
на мой взгляд лучшее решение использует jQuery:
этот метод является простым и чистым решением моей проблемы.
jQuery .load() документация здесь.
мое решение похоже на решение Лоло выше. Однако я вставляю HTML-код через документ JavaScript.напишите вместо использования jQuery:
a.html:
б.ДШ:
причина для меня против использования jQuery заключается в том, что jQuery.js имеет размер
90kb, и я хочу сохранить объем данных для загрузки как можно меньше.
для того, чтобы получить правильно экранированный файл JavaScript без особого труда, вы можете использовать следующую команду sed:
кредиты Грег Minshall для улучшенной команды sed, которая также избегает обратных косых черт и одинарных кавычек, чего моя исходная команда sed не сделала считать.
расширение ответа Лоло сверху, вот немного больше автоматизации, если вам нужно включить много файлов:
и затем включить что-то в html:
который будет включать представления/заголовок файла.html и представления / нижний колонтитул.HTML-код
например:
бесстыдный плагин библиотеки, которую я написал, решить это.
выше будет принимать содержимое /path/to/include.html и заменить div С ним.
простые серверные директивы include, чтобы включить другой файл в той же папке выглядит так:
на очень старое решение тогда я удовлетворял свои потребности, но вот как это сделать, совместимый со стандартами код:
нет необходимости в скриптах. Нет необходимости делать какие-либо причудливые вещи на стороне сервера (tho, что, вероятно, было бы лучшим вариантом)
имейте в виду, что для браузеров, которые не поддерживают бесшовные, если вы нажмете ссылку в 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:
Я пишу приведенный ниже код, в моем решении вы можете получить доступ к включенному контенту в :
(ключ загрузки содержания синхронно.)
включить.inc:
в w3.js включает такие работы:
это сделает ссылку (может измениться, чтобы быть желаемым элементом ссылки, если он уже установлен), установите импорт (если он у вас уже есть), а затем добавьте его. Затем он оттуда возьмет это и проанализирует файл в 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 Полимер
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 файл в переменной (и записать содержимое на экран, где вы вызываете сценарий.)
HTML импорт является одним из способов включить внешний HTML-документ и его веб-компоненты на странице без соответствующего AJAX запроса или загрузки IFRAME. Ввиду этой возможности, импорт HTML может послужить ускорению времени загрузки страницы, открыть новые возможности для повторного использования кода, а также улучшить интеграцию некоторых популярных сервисов, таких как Google Maps.
На момент написания статьи, технология импорта HTML является рабочим проектом W3C, а это значит, что она ещё не является веб-стандартом и пока не поддерживается во всех браузерах. Однако, HTML импорт можно уже сейчас использовать через Polymer.
HTML импорт как инструмент для повторного использования и агрегирования
Разработчики программного обеспечения, в том числе и веб-разработчики, стараются не дублировать код, а скорее распределять его по моделям, объектам, функциям. Благодаря разработчикам Дэйву Томасу и Эндрю Ханту, этот подход обычно называют DRY-разработкой или DRY-программированием, что значит в переводе с английского "не повторяй себя".
Для примера возьмём HTML-файл с названием messages.html:
Для повторного использования контента из messages.html, для начала включите документ через HTML импорт. Это осуществляется добавлением тега <link> с атрибутом rel, равным "import" и атрибутом href, принимающим значение messages.html:
Данный код выполняет следующие задачи:
- Выбирает элемент link
- Импортирует файл
- Извлекает импортированный DOM
- Вставляет содержимое на страницу
Этот пример, конечно, крайне упрощён. Если бы содержание в 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 – используйте тег <x-paypal-express key="6827364828736" callback="some.html">, и вы можете добавить безопасную возможность оплаты на любую страницу.
- Форма для E-mail подписки - используя HTML импорт, добавление формы подписки может быть также просто, как импортирование внешнего HTML документа и добавления тега <email-subscribe>.
- Карты Google - часто используемый пример импорта HTML, вставляем пользовательский элемент <google-map lat="37.790" long="-122.390">. Конечно, это сработает, только после того как будет загружен документ, определяющий специальный тег.
Третий пример показывает то, как HTML импорт может помочь разработчикам, более эффективно загрузить некоторые фреймворки или другие связки HTML.
В данном примере, загружаем Bootstrap и его многочисленные файлы:
В bootstrap.html подключаем нужные файлы, как бы мы это сделали в разделе <head>:
Браузерная поддержка
Как уже упоминалось выше, в настоящее время существует достаточно мало браузеров поддерживающих HTML импорт. Исключения - Chrome 36+, Chrome 37+ для Android и Opera 23+0.
Также существуют полизаполнения, которые делают эту функцию доступной практически в любом браузере. Самым надёжным является вышеупомянутый проект Polymer.
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 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.
Читайте также: