1. дома
  2. Вопрос и ответ
  3. Можно ли повторно использовать HTML как шаблон на нескольких страницах?

Можно ли повторно использовать HTML как шаблон на нескольких страницах?

2016-04-03 4 views
4

У меня есть несколько страниц на веб-сайте, которые используют один и тот же заголовок для каждой страницы. Мне было интересно, есть ли какой-нибудь способ, чтобы просто сослаться на файл с HTML для заголовка вроде как в этом псевдокоде:Можно ли повторно использовать HTML как шаблон на нескольких страницах?

<!-- Main Page --> 

<body> 
    <html_import_element src = "myheadertemplate.html"> 
<body>

Затем в отдельном файле:

<!-- my header template html --> 

<div> 
    <h1>This is my header</h1> 
    <div id = "navbar"> 
    <div class = "Tab">Home</div> 
    <div class = "Tab">Contact</div> 
    </div> 
</div>

Таким образом, я может написать заголовок html один раз и просто импортировать его на каждой из моих страниц, где мне это нужно, написав один простой тег. Это возможно? Могу ли я сделать это с помощью XML?

источник

2016-04-03 Frank

+0

не с чистым html. Но большинство языков на стороне сервера поддерживает некоторый тип *** include ***. На какой сервер вы будете размещать свой сайт? (* вы могли бы также использовать JS для этого, но это не было бы поисковой системой *) –

+0

Вы можете сделать эту клиентскую сторону, используя библиотеку шаблонов, такую ​​как 'Underscore.js' - см. ссылку здесь: - http: // underscorejs .org/ – aphextwix

+0

underscorejs - это слишком большой для чего-то подобного простой запрос ajax ... В jquery, который будет выглядеть так: '' $ .get ("header.htm", function (data) {$ (" #header "). html (data);});' ' – seahorsepip

ответ

2

Итак, после долгого времени я действительно нашел способ сделайте это с помощью AJAX. Импорт HTML - отличное решение, но поддержка в браузерах сильно не хватает по состоянию на 04/2017, поэтому я придумал лучшее решение. Вот мой исходный код:

function HTMLImporter() {} 

HTMLImporter.import = function(url) { 

    var error, http_request, load, script; 

    script = document.currentScript || document.scripts[document.scripts.length - 1]; 

    load = function(event) { 

    var attribute, index, index1, new_script, old_script, scripts, wrapper; 

    wrapper = document.createElement("div"); 
    wrapper.innerHTML = this.responseText; 

    scripts = wrapper.getElementsByTagName("SCRIPT"); 

    for (index = scripts.length - 1; index > -1; -- index) { 

     old_script = scripts[index]; 

     new_script = document.createElement("script"); 
     new_script.innerHTML = old_script.innerHTML; 

     for (index1 = old_script.attributes.length - 1; index1 > -1; -- index1) { 

     attribute = old_script.attributes[index1]; 
     new_script.setAttribute(attribute.name, attribute.value); 

     } 

     old_script.parentNode.replaceChild(new_script, old_script); 

    } 

    while(wrapper.firstChild) { 

     script.parentNode.insertBefore(wrapper.removeChild(wrapper.firstChild), script); 

    } 

    script.parentNode.removeChild(script); 

    this.removeEventListener("error", error); 
    this.removeEventListener("load", load); 

    }; 

    error = function(event) { 

    this.removeEventListener("error", error); 
    this.removeEventListener("load", load); 

    alert("there was an error!"); 

    }; 

    http_request = new XMLHttpRequest(); 
    http_request.addEventListener("error", error); 
    http_request.addEventListener("load", load); 
    http_request.open("GET", url); 
    http_request.send(); 

};

Теперь, когда я хочу, чтобы импортировать HTML в другой документ, все, что нужно сделать, это добавить тег сценария, как это:

<script>HTMLImporter.import("my-template.html");</script>

Моя функция будет на самом деле заменить скрипт тег, используемый для вызова импорта с содержимым my-template.html, и он выполнит любые скрипты, найденные в шаблоне. Для шаблона не требуется специальный формат, просто напишите HTML-код, который вы хотите отобразить в коде.

источник

2017-04-29 00:41:19 Frank

0

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

В большинстве случаев это делается на серверных языках, таких как php, например, include("header.php");.

источник

2016-04-03 16:03:04 seahorsepip

+0

Но весь код будет только html, поэтому нет динамического содержимого. Я использую NodeJS, поэтому я думаю, что это было бы не так сложно, но это похоже на довольно простые функции, поэтому я надеялся, что он уже может существовать. – Frank

+0

Я считаю, вы также можете использовать тег '', чтобы вставить html, удалив необходимость использования iframe. – GillesC

+0

Тег объекта работает в основном таким же, как тег iframe, и поддерживается только в современных браузерах. – seahorsepip

3

Вы можете сделать это следующим образом.

<head> 
    <link rel="import" href="myheadertemplate.html"> 
</head>

, где вы могли бы иметь свой myheadertemplate.html 

<div> 
    <h1>This is my header</h1> 
    <div id = "navbar"> 
    <div class = "Tab">Home</div> 
    <div class = "Tab">Contact</div> 
    </div> 
</div>

Вы можете использовать его с JS ниже

var content = document.querySelector('link[rel="import"]').import;

источник

2016-04-03 16:15:15

+0

Запрос ajax имеет больше смысла, так как выше только html5:/Но хороший код, хотя, никогда не знал импорта за пределы css импортировать себя ^^ – seahorsepip

+1

Да, я натолкнулся когда-нибудь назад, исследуя WebComponents и Advanced HTML5 –

+1

Собственно, это в значительной степени что я ищу. Ответ на передний план! Я нашел отличное объяснение того, о чем вы говорите: [link] (http://www.html5rocks.com/en/tutorials/webcomponents/imports/) – Frank

Смежные вопросы

 Смежные вопросы