it-swarm.com.ru

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

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

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

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

100
Prasanth A R

Вы можете сделать это с помощью 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, вы сможете нажимать на теги ссылок.

157
Hariprasad Prolanx

Должны ли вы использовать 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]
24
Sol

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

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

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

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

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

8
Asheesh Gupta

Вы также можете поставить: (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>

6
JustinM

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

Я построил маленький пример: 

Проверено 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 post

5
JavierFuentes

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

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

JS Function

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>

views/header.html

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

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

5
darcher

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

0
Mitch VanDuyn

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

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

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

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

0
Mark

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

<!--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>
0
Samuel Omopariola