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

Question

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

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

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

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

12 93

javascript html css jquery

12 ответов:

должны ли вы использовать структуру файлов html с JavaScript? Вы рассматривали возможность использования PHP вместо этого, чтобы вы могли использовать простой PHP include object?

Если вы конвертируете имена ваших файлов .HTML-страницы .php-тогда в верхней части каждого из ваших .php страницы вы можете использовать одну строку кода, чтобы включить содержимое из вашего заголовка.php
<?php include('header.php'); ?>
сделайте то же самое в нижнем колонтитуле каждой страницы, чтобы включить содержимое из нижнего колонтитула.файл php
<?php include('footer.php'); ?>
Нет JavaScript / Требуется Jquery или дополнительные включенные файлы.

NB вы также можете конвертировать ваш .HTML-файлы .php файлы, используя следующее в вашем .htaccess file
# re-write html to php
RewriteRule ^(.*)\.html$ .php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/ [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ .php [NC,L]

23

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

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

21

попробуйте это,

<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"></div><br />
<div id="content">
Main Content
</div><br />
<div id="footer"></div>
<script> 
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
</script> 
</body>
</html>

вы можете найти демо здесь

9

Я пробовал это: Создайте файл

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>

6

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

я наткнулся на веб-сайт, объясняющий методы "ditching jquery", он демонстрирует метод на сайте делает именно то, что вы ищете в простой Джейн 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;

    }
);
.HTML-код

<div id="header"></div>
вид/заголовок.HTML-код

<header id="new-header"></header>
источник не мой собственный, я просто ссылаюсь на него, поскольку это хорошее ванильное решение javascript для OP. оригинальный код живет здесь: http://gomakethings.com/ditching-jquery#get-html-from-another-page

4

Я думаю, ответы на этот вопрос слишком старый... в настоящее время некоторые настольные и мобильные браузеры поддерживают Шаблоны HTML для этого.

Я построил небольшой пример:

протестировано ОК в Хроме 61.0, 48.0 Опера, Опера Неон 1.0, браузер Android 6.0, Chrome для мобильных устройств и браузера Антибаннер 61.0 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 post

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

другой подход, доступный с момента первого вопроса, заключается в использовании reactrb-express (см. http://reactrb.org) это позволит вам писать сценарий в ruby на стороне клиента, заменяя ваш html-код компонентами react, написанными на ruby.

0

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

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

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

Я надеюсь, что это помогает!

0

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

содержание.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>

0

Hariprasad Prolanx · Accepted Answer · 2018-08-29 08:12:18

вы можете сделать это с 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>

<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, вы должны быть в состоянии нажать на ссылку теги.