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

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

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

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

Ответы

Ответ 1

Вы можете выполнить это с помощью jquery.

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

<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></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, вы должны нажать теги ссылок.

Ответ 2

Должны ли вы использовать html-структуру файла с JavaScript? Вы рассматривали использование PHP вместо этого, чтобы вы могли использовать простой объект include 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]

Ответ 3

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

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

<!--#include file="include_head.html" -->

Ответ 4

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

<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>

Здесь вы можете найти демонстрацию

Ответ 5

Я пробовал это: Создайте файл 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>

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

Ответ 6

Вы также можете поставить: (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:[email protected]'>Contact Us</a> / "
	+ "<a href='mailto:[email protected]'>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>

Ответ 7

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

Я наткнулся на веб-сайт, объясняющий методы "ditching 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

Ответ 8

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

<!--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:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>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>

Ответ 9

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

Ответ 10

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

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

Протестировано OK в 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