Создание многоразового html для панели навигации на нескольких страницах

Question

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

Кажется, можно использовать iframes, но я попробовал, и вся стилизация страницы вышла из строя. Я могу это исправить, но мне интересно, есть ли что-то подобное.

Было бы удивительным, если что-то подобное может работать:

вар Navbar = document.getElementById ('Navbar');
navbar.innerHtml = url ('navigation.txt');

В настоящее время я работаю в автономном режиме на своем сайте, поэтому я не думаю, что могу делать запросы xmlhttp. Верный? По крайней мере, мне еще предстоит получить какой-либо пример ajax для работы. Это печально, потому что я думаю, что могу легко использовать это для своего приложения.

Вот моя разметка navbar. Это не очень сложно, поэтому у меня есть чувство, что я просто отредактирую его вручную в конце.

<nav> 
    <ul id="navbar"> 
     <li><a href="biosketch.html">Biosketch</a></li> 
     <li><a href="projects.html">Class Projects</a> 
      <ul> 
       <li><a href="projects.html#SeniorProject">Senior Project</a></li> 
       <li><a href="projects.html#WindTurbine">Wind Turbine</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Resume</a></li> 
     <li><a href="#">Work Experience</a></li> 
     <li><a href="#">Contact Me</a></li> 
    </ul> 
</nav> 

Answer 1

Как это было сказано, как правило, это делается на стороне сервера с включаемой для не сайты AJAX. Однако, я думаю, вы можете использовать шаблоны закрытия Google. В принципе, вы определяете шаблон на своем языке шаблонов, который генерирует функцию javascript, которую вы можете вызывать для визуализации вашего HTML.

http://code.google.com/closure/templates/docs/helloworld_js.html

Пример:

--templates.soy 

{namespace templates} 

{template .nav} 
<ul id="navbar"> 
    <li><a href="biosketch.html">Biosketch</a></li> 
    <li><a href="projects.html">Class Projects</a> 
     <ul> 
      <li><a href="projects.html#SeniorProject">Senior Project</a></li> 
      <li><a href="projects.html#WindTurbine">Wind Turbine</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Resume</a></li> 
    <li><a href="#">Work Experience</a></li> 
    <li><a href="#">Contact Me</a></li> 
</ul> 
{\template} 

Затем выполните следующую команду, чтобы скомпилировать его в яваскрипте функцию

java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js templates.soy 

Это создаст файл с именем templates.js, содержащим функцию называемый templates.nav, который вы можете позвонить со своей страницы следующим образом:

document.getElementById('navbar').innerHTML = templates.nav(); 

Это даже не использование слияния данных, что позволит вам передать объект данных для визуализации HTML, который не является статичным. Но я только показал вам это, потому что это все, что вы просили. Я знаю, что вы могли бы просто вставить html в строку JS, но вам нужно иметь дело с отсутствием синтаксической помощи от вашего редактора.

Единственным недостатком является то, что для этого требуется JS, о котором вы, похоже, не возражаете. Однако, если вы хотите поддерживать JS-less клиентов, вы можете создать шаблон на стороне сервера. Существует также компилятор, который генерирует методы закрытия Google google. Вы можете найти его на своем веб-сайте.

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

Answer 2

Используйте язык на стороне сервера для создания файла навигации. Он может быть статичным или может быть чрезвычайно сложным, это зависит от вас.

<?php include 'includes/nav.php'; ?> 

содержимое nav.php может быть <nav> элемент целиком. Вы можете в идеале запрограммировать его, чтобы показать/скрыть элементы на основе текущего раздела, а также переключить определенные классы на основе раздела.

Answer 3

Вы очень можете использовать AJAX-вызовы «офлайн», как вы выразились, это код на стороне клиента.

Но так, как я бы это сделал, если бы я не использовал серверный язык (ASP.NET или PHP), должен иметь небольшой .js-файл, который отображает навигационную панель, и я бы просто добавил <script src='js/navbar.js'></script> куда пойдет навигатор.

Таким образом, когда вам нужно его изменить, вы меняете только .js и обновляетесь на каждой другой странице.

Answer 4

Несколько предложений:

• Если вы используете JSP (или аналогичные технологии), вы можете просто использовать что-то вроде SiteMesh здесь, чтобы помочь с шаблонами
• Вы можете использовать на сторону сервера включает в себя
• вы можете написать функцию JavaScript, чтобы программно построить DOM вам нужно (не требуется AJAX), а затем просто вызвать эту функцию JS всей вашей страницы (без дублирования кода)

Answer 5

Обычно эти виды повторно используемых частей разметки будут генерироваться на стороне сервера, главным образом через механизм шаблонов.

Вы можете изменить настройки безопасности Firefox, чтобы разрешить автономные вызовы AJAX, но, вероятно, лучше настроить локальную среду разработки, где вы можете начать использовать язык на стороне сервера и делать это с самого начала.

Answer 6

Если вы хотите реализовать его без какой-либо стороне сервера кодирования участвует, попробуйте следующее:

var http = false; 

if(navigator.appName == "Microsoft Internet Explorer") { 
    http = new ActiveXObject("Microsoft.XMLHTTP"); 
} else { 
    http = new XMLHttpRequest(); 
} 

http.open("GET", "navigation.txt"); 
http.onreadystatechange=function() { 
    if(http.readyState == 4) { 
    var navbar = document.getElementById('navbar'); 
     navbar.innerHtml = http.responseText; 
    } 
} 
http.send(null); 

Answer 7

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

Можно через это: https://www.w3schools.com/howto/howto_html_include.asp

Вы пишете HTML в навигационной панели в отдельном файле .html и назвать его так:

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

Тогда звоните в яваскрипта функции от

<script src="https://www.w3schools.com/lib/w3data.js"></script> 

который w3IncludeHTML();

И вы должны запустить его! Надеюсь, это помогло! :)