Сделайте файлы заголовка и нижнего колонтитула включенными в несколько HTML-страниц

141

Я хочу создать общие страницы верхнего и нижнего колонтитула, которые включены в несколько HTML-страниц.

Я хотел бы использовать JavaScript. Есть ли способ сделать это, используя только HTML и JavaScript?

Я хочу загрузить страницу верхнего и нижнего колонтитула в другой HTML-страницы.

Прасант АР
источник
1
Вы ищете ajax ... $ ('. MyElement) .load (' urltopage.html '); это загрузит содержимое файла
urltopage.html

Ответы:

194

Вы можете сделать это с помощью jquery .

Поместите этот код в index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

и поместите этот код в header.htmlи footer.html, в том же месте, что иindex.html

<a href="http://www.google.com">click here for google</a>

Теперь, когда вы посещаете index.html, вы сможете нажать ссылку теги.

Hariprasad Prolanx
источник
Да. вся страница должна иметь
такую
19
загрузить или другую функцию, которая импортирует или использует local fileне работает в новой версии Google Chrome или IE, причина: безопасность!
Синак
7
Иногда я удивляюсь, как люди могут дышать без jQuery. Или есть .breathe(in)и .breathe(out)уже? Любой язык сценариев здесь просто излишний.
Заговор
6
Я продолжаю получать, Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.когда я бегу в Chrome
digiwebguy
1
Требуется запустить код на сервере. Это означает, что URL должен быть похож на "http: // .....".
Патриотическое
37

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

Просто добавьте следующую строку, где вы хотите включить свой файл:

<!--#include file="include_head.html" -->
Заговор
источник
6
Мне нравится этот старомодный способ. На самом деле, кажется, что использование сценария для выполнения такого простого действия не дает особых преимуществ.
Дженна Лиф
3
Фактически, включение файлов с использованием сценария имеет серьезные недостатки: это снижает производительность, поскольку клиенту необходимо загрузить главную страницу, загрузить DOM, запустить сценарий и только после этого можно загружать включенные файлы, для чего требуется дополнительный запрос к серверу на каждый включенный файл. , Включение файлов с использованием серверной стороны включает в себя все элементы во время первого запроса к серверу, никаких действий клиента не требуется.
Заговор
SSI требует использования расширения файла: .shtml, .stm, .shtm. Работает в Apache, LiteSpeed, nginx, lighttpd и IIS.
ubershmekel
@ubershmekel Как вы сказали, соответствующие веб-серверы поддерживают SSI. Расширение файла не ограниченно .shtml, .stmи .shtm: В IIS, все сгенерированные файлы могут содержать SSI, например .aspx. Если вы работаете с PHP, вам нужно использовать PHP includeили virtualкоманду вместо этого для достижения того же результата.
Заговор
33

Должны ли вы использовать HTML структуру файла с JavaScript? Рассматривали ли вы вместо этого использование PHP, чтобы можно было использовать простой включаемый объект PHP?

Если вы преобразуете имена файлов ваших .html-страниц в .php - тогда в верхней части каждой из ваших .php-страниц вы можете использовать одну строку кода для включения содержимого из вашего header.php

<?php include('header.php'); ?>

Сделайте то же самое в нижнем колонтитуле каждой страницы, чтобы включить содержимое из файла footer.php

<?php include('footer.php'); ?>

Не требуется JavaScript / Jquery или дополнительные включенные файлы.

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

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
золь
источник
2
@ Justin808 - OP ничего не упоминает о локальной размещенной установке, поэтому я предположил, что он говорил о файлах на сервере.
Соль
1
@Sol Однако в OP DID специально упоминается о желании использовать Javascript, поэтому ваш ответ не по теме. Полноценная веб-разработка быстро отходит от использования PHP вообще, Node.js предоставляет все эквивалентные функциональные возможности и требует использования только Javascript. TL; DR, пожалуйста, отвечайте на вопросы, как их просили ОП хотел JS-решение, поэтому неуместно давать ему решение PHP, Ruby, Python, C ++ или любой другой язык.
Зак
9

Я пробовал это: создать файл header.html, как

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>Your application</title>

Теперь включите header.html в ваши HTML-страницы, например:

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script> 
     $(function(){ $("head").load("header.html") });
   </script>
</head>

Работает отлично.

Ашиш Гупта
источник
1
Хорошее решение, но я думаю, что это будет загружать инфраструктуру jquery дважды, один раз для начальной загрузки страницы и во-вторых, когда выполняется метод .load () - поскольку целевая страница также содержит jquery.
Делали
8

Вы также можете поставить: (load_essentials.js :)

document.getElementById("myHead").innerHTML =
	"<span id='headerText'>Title</span>"
	+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";
document.getElementById("myFooter").innerHTML =
	"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
	+ " rights reserved.</p>"
	+ "<p id='credits'>Layout by You</p>"
	+ "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
	+ "<a href='mailto:you@you.com'>Report a problem.</a></p>";
<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>

JustinM
источник
6

Я думаю, что ответы на этот вопрос слишком стары ... в настоящее время некоторые настольные и мобильные браузеры поддерживают 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Template Example</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="import" href="autoload-template.html">
</head>
<body>

<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>

</body>
</html>

autoload-template.html

<span id="template-content">
    Template Hello World!
</span>

<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector( '#template-content' );

    var container = document.querySelectorAll( '.template-container' );

    //alert( container.length );
    for(i=0; i<container.length ; i++) {
        container[i].appendChild( post.cloneNode( true ) );
    }
</script>

styles.css

#template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}

Вы можете получить больше примеров в этом посте HTML5 Rocks

JavierFuentes
источник
4
HTML Imports теперь не рекомендуется.
Джонатан Шарман
5

Я работал в C # / Razor, и так как у меня на домашнем ноутбуке нет настроек IIS, я искал решение javascript для загрузки представлений при создании статической разметки для нашего проекта.

Я наткнулся на веб-сайт, объясняющий методы «отказа от jquery», он демонстрирует, что метод на сайте делает именно то, что вам нужно, в простом Jane javascript ( ссылка на ссылку внизу сообщения ). Обязательно исследуйте любые уязвимости безопасности и проблемы совместимости, если вы собираетесь использовать это в работе. Я нет, поэтому я никогда не изучал это сам.

Функция JS

var getURL = function (url, success, error) {
    if (!window.XMLHttpRequest) return;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status !== 200) {
                if (error && typeof error === 'function') {
                    error(request.responseText, request);
                }
                return;
            }
            if (success && typeof success === 'function') {
                success(request.responseText, request);
            }
        }
    };
    request.open('GET', url);
    request.send();
};

Получить контент

getURL(
    '/views/header.html',
    function (data) {
        var el = document.createElement(el);
        el.innerHTML = data;
        var fetch = el.querySelector('#new-header');
        var embed = document.querySelector('#header');
        if (!fetch || !embed) return;
        embed.innerHTML = fetch.innerHTML;

    }
);

index.html

<!-- This element will be replaced with #new-header -->
<div id="header"></div>

просмотров / header.html

<!-- This element will replace #header -->
<header id="new-header"></header>

Источник не мой, я просто ссылаюсь на него, так как это хорошее ванильное решение JavaScript для OP. Оригинальный код живет здесь: http://gomakethings.com/ditching-jquery#get-html-from-another-page

darcher
источник
Хорошее решение Я предпочитаю использовать jquery.
Делали
2

Алоха с 2018 года. К сожалению, у меня нет ничего крутого или футуристического, чтобы поделиться с вами.

Однако я хотел отметить, что те, кто прокомментировал, что load()метод jQuery в настоящее время не работает, вероятно, пытаются использовать метод с локальными файлами без запуска локального веб-сервера. В противном случае будет бросать указанное выше ошибки «крест происхождения», который указывает , что крест происхождения запрашивает как , например, по способу нагрузки поддерживаются только для схем протокола , таких как http, dataили https. (Я предполагаю, что вы не делаете фактический перекрестный запрос, то есть файл header.html фактически находится в том же домене, что и страница, с которой вы его запрашиваете)

Итак, если принятый ответ выше не работает для вас, пожалуйста, убедитесь, что вы используете веб-сервер. Самый быстрый и простой способ сделать это, если вы спешите (и используете Mac, на котором уже установлен Python), - это запустить простой http-сервер Python. Вы можете увидеть, как легко это сделать здесь .

Надеюсь, это поможет!

отметка
источник
Использование веб-сервера противоречит цели, хотя, по крайней мере, для меня причина в том, чтобы использовать только Javascript, состоит в том, чтобы упростить его разработку.
Конрад Хеффнер
1

Также есть возможность загружать скрипты и ссылки в шапку. Я добавлю это один из примеров выше ...

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');

document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>
Самуэль Омопариола
источник
0

с тех пор, как впервые был задан этот вопрос, появился еще один подход - использовать реактив-экспресс (см. http://reactrb.org ). Это позволит вам создавать сценарии на ruby ​​на стороне клиента, заменяя ваш HTML-код компонентами реагирования, написанными на ruby.

Митч ВанДуйн
источник
1
оп спросил только с использованием HTML и Javascript, но вы берете его, чтобы использовать рубин ..: D LOL, но крутой инструментщик ..
Мейли Чхон
Я принял дух вопроса - без серверных языков шаблонов. все это сводится к Javascript, поэтому я считаю, что это соответствует цели вопроса.
Митч ВанДуйн
-1

Сохраните HTML-код, который вы хотите включить в файл .html:

content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

Включить HTML

Включение HTML выполняется с помощью атрибута w3-include-html :

пример

    <div w3-include-html="content.html"></div>

Добавьте JavaScript

HTML включает в себя JavaScript.

    <script>
    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          } 
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    }
    </script>

Вызовите includeHTML () внизу страницы:

пример

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>
<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
includeHTML();
</script>

</body>
</html>
Raaf003
источник
Я получаю белую пустую страницу при тестировании index.html после этого
Хуссейн Эльбехейри,