Как включить HTML во многие документы, используя JavaScript

Чтобы отобразить один и тот же контент, скопированный на множество разных страниц вашего сайта, с HTML вы должны вручную вставить этот контент. Но с JavaScript, просто включите фрагменты кода без каких-либо серверных сценариев. JavaScript облегчает обновление больших веб-сайтов — просто обновите отдельный скрипт, а не каждую страницу сайта.

Отличный пример использования JS для ручного HTML опирается на заявления об авторских правах.

Как использовать JavaScript для вставки содержимого в HTML

нано редактор с html

Этот процесс так же прост, как определение файла JavaScript, а затем вызов его в HTML через скрипт тег.


  1. Напишите HTML-код, который вы хотите повторить, в виде файла JavaScript. Для простой вставки авторского права достаточно файла с одной строкой JS:

    document.write («Авторские права, все права защищены.»);

    Вы должны использовать document.write везде, где вы хотите, чтобы скрипт вставлял текст в HTML-документ.


  2. Сохраните ваш JS-файл в отдельном каталоге под webroot, обычно включает в себя:

    включает / copyright.js


  3. Откройте в редакторе HTML веб-страницу, которая будет отображать вывод JavaScript. Найдите в HTML место, где должен отображаться включаемый файл, и поместите в него следующий код:


  4. Добавьте этот же код на каждую соответствующую страницу.


  5. Когда информация об авторских правах изменяется, отредактируйте файл copyright.js. После того, как вы загрузили его, текст будет автоматически изменяться на каждой странице вашего сайта.


Советы и рекомендации

Не забывайте document.write инструкция на каждой строке вашего HTML в файле JS. В противном случае этот процесс не будет работать.

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

Документ веб-страницы не будет отображать HTML, который включен, только вызов сценария JavaScript.

Ссылка на основную публикацию