Я хочу создать общие страницы верхнего и нижнего колонтитула, которые включены в несколько HTML-страниц.
Я хотел бы использовать JavaScript. Есть ли способ сделать это, используя только HTML и JavaScript?
Я хочу загрузить страницу верхнего и нижнего колонтитула в другой HTML-страницы.
javascript
jquery
html
css
Прасант АР
источник
источник
Ответы:
Вы можете сделать это с помощью jquery .
Поместите этот код в
index.html
и поместите этот код в
header.html
иfooter.html
, в том же месте, что иindex.html
Теперь, когда вы посещаете
index.html
, вы сможете нажать ссылку теги.источник
local file
не работает в новой версии Google Chrome или IE, причина: безопасность!.breathe(in)
и.breathe(out)
уже? Любой язык сценариев здесь просто излишний.Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
когда я бегу в ChromeЯ добавляю общие части как верхний и нижний колонтитулы, используя Включения на стороне сервера . Нет HTML и JavaScript не требуется. Вместо этого веб-сервер автоматически добавляет включенный код, прежде чем делать что-либо еще.
Просто добавьте следующую строку, где вы хотите включить свой файл:
источник
.shtml
,.stm
,.shtm
. Работает в Apache, LiteSpeed, nginx, lighttpd и IIS..shtml
,.stm
и.shtm
: В IIS, все сгенерированные файлы могут содержать SSI, например.aspx
. Если вы работаете с PHP, вам нужно использовать PHPinclude
илиvirtual
команду вместо этого для достижения того же результата.Должны ли вы использовать HTML структуру файла с JavaScript? Рассматривали ли вы вместо этого использование PHP, чтобы можно было использовать простой включаемый объект PHP?
Если вы преобразуете имена файлов ваших .html-страниц в .php - тогда в верхней части каждой из ваших .php-страниц вы можете использовать одну строку кода для включения содержимого из вашего header.php
Сделайте то же самое в нижнем колонтитуле каждой страницы, чтобы включить содержимое из файла footer.php
Не требуется JavaScript / Jquery или дополнительные включенные файлы.
NB. Вы также можете конвертировать ваши файлы .html в файлы .php, используя следующую информацию в вашем файле .htaccess
источник
Я пробовал это: создать файл header.html, как
Теперь включите header.html в ваши HTML-страницы, например:
Работает отлично.
источник
Вы также можете поставить: (load_essentials.js :)
источник
Я думаю, что ответы на этот вопрос слишком стары ... в настоящее время некоторые настольные и мобильные браузеры поддерживают HTML-шаблоны для этого.
Я построил маленький пример:
Проверено нормально в Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 и Adblocker Browser 54.0
Протестировано KO в Safari 10.1, Firefox 56.0, Edge 38.14 и IE 11
Больше информации о совместимости в canisue.com
index.html
autoload-template.html
styles.css
Вы можете получить больше примеров в этом посте HTML5 Rocks
источник
Я работал в C # / Razor, и так как у меня на домашнем ноутбуке нет настроек IIS, я искал решение javascript для загрузки представлений при создании статической разметки для нашего проекта.
Я наткнулся на веб-сайт, объясняющий методы «отказа от jquery», он демонстрирует, что метод на сайте делает именно то, что вам нужно, в простом Jane javascript ( ссылка на ссылку внизу сообщения ). Обязательно исследуйте любые уязвимости безопасности и проблемы совместимости, если вы собираетесь использовать это в работе. Я нет, поэтому я никогда не изучал это сам.
Функция JS
Получить контент
index.html
просмотров / header.html
Источник не мой, я просто ссылаюсь на него, так как это хорошее ванильное решение JavaScript для OP. Оригинальный код живет здесь: http://gomakethings.com/ditching-jquery#get-html-from-another-page
источник
Алоха с 2018 года. К сожалению, у меня нет ничего крутого или футуристического, чтобы поделиться с вами.
Однако я хотел отметить, что те, кто прокомментировал, что
load()
метод jQuery в настоящее время не работает, вероятно, пытаются использовать метод с локальными файлами без запуска локального веб-сервера. В противном случае будет бросать указанное выше ошибки «крест происхождения», который указывает , что крест происхождения запрашивает как , например, по способу нагрузки поддерживаются только для схем протокола , таких какhttp
,data
илиhttps
. (Я предполагаю, что вы не делаете фактический перекрестный запрос, то есть файл header.html фактически находится в том же домене, что и страница, с которой вы его запрашиваете)Итак, если принятый ответ выше не работает для вас, пожалуйста, убедитесь, что вы используете веб-сервер. Самый быстрый и простой способ сделать это, если вы спешите (и используете Mac, на котором уже установлен Python), - это запустить простой http-сервер Python. Вы можете увидеть, как легко это сделать здесь .
Надеюсь, это поможет!
источник
Также есть возможность загружать скрипты и ссылки в шапку. Я добавлю это один из примеров выше ...
источник
с тех пор, как впервые был задан этот вопрос, появился еще один подход - использовать реактив-экспресс (см. http://reactrb.org ). Это позволит вам создавать сценарии на ruby на стороне клиента, заменяя ваш HTML-код компонентами реагирования, написанными на ruby.
источник
Сохраните HTML-код, который вы хотите включить в файл .html:
content.html
Включить HTML
Включение HTML выполняется с помощью атрибута w3-include-html :
пример
Добавьте JavaScript
HTML включает в себя JavaScript.
Вызовите includeHTML () внизу страницы:
пример
источник