Simular PHP Incluir sin PHP

Question

Quiero incluir el mismo menú de navegación en varias páginas, sin embargo, no tengo soporte PHP, ni puedo afectar mi servidor de ninguna otra manera.

Quiero evitar simplemente copiar y pegar el html en todas las páginas, ya que esto haría que la actualización del menú sea un problema.

Las dos opciones que se me ocurren son los siguientes:

1) Tener todos los contenidos existen en una sola página, a continuación, determinar qué contenido para mostrar basa en una palabra clave anexa a la url:

example.com/index?home 
example.com/index?news 

2) Incluir un archivo javascript que tiene una función que escribe el menú y llamar a la función en cada página

function setupMenu() { 
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>"); 
} 

Con la opción 1, el proceso de actualización o consistiría f sería la edición de un menú de navegación en la página

Con la opción 2, la actualización significar cambiar la función en el archivo javascript

Mi preocupación con la Opción 1 es que la página tendría que cargar una gran cantidad de contenido que se no necesitaría mostrar. Mi preocupación por la Opción 2 puede parecer trivial, pero es que el código puede ser complicado.

¿Hay alguna razón para hacerlo de una manera sería mejor que la otra? ¿O hay una tercera opción superior que me falta?

Answer 1

Usted tiene algunas opciones, cada una con sus propias ventajas y desventajas: Incluye

• el lado del servidor, o SSI. Si no tienes PHP, existe una buena posibilidad de que no tengas SSI tampoco, y esta opción requiere un poco de molestar con tu archivo .htaccess. Comprueba Dominic P.respuesta de un artículo de SSI. El beneficio de SSI sobre JavaScript o Frames es que no requiere que el usuario tenga JS habilitado, lo que muchos usuarios no hacen, y tampoco presenta dificultades de navegación.

• Marcos. Puede usar standard frames para poner la navegación en su propio archivo separado, y con el estilo correcto sería perfecto. También puede usar un iframe para colocar su navegación en una parte arbitraria del sitio, como una barra lateral o lo que sea. La desventaja de los marcos, particularmente los marcos estándar, es que tienden a hacer marcadores, los enlaces y los botones de avance/retroceso se comportan de manera extraña. Por el lado positivo, los marcos no necesitan compatibilidad con el navegador ni soporte del servidor.

• JavaScript. Puede consultar cualquiera de las otras respuestas para obtener excelentes explicaciones de la solución JS, especialmente si está utilizando jQuery. Sin embargo, si su sitio no es lo suficientemente dinámico como para que sus usuarios deseen tener JavaScript habilitado, esto significará que un gran número de sus usuarios no verá el menú en absoluto, malo, definitivamente.

-

Answer 2

del lado del servidor incluye: http://www.freewebmasterhelp.com/tutorials/ssi/

Answer 3

Sí utilización .load jQuery función ajax

$('#result').load('ajax/menu.html'); 

---

De esa manera su código se mantiene limpio, y puedes editar la incluye en los archivos HTML separados solo como PHP.

Answer 4

Consulte Server Side Includes. No tengo mucha experiencia con ellos, pero por lo que recuerdo, están diseñados para ser una solución a su problema.

Answer 5

Debe considerar AJAX para esta tarea. Incluya una biblioteca de terceros como jQuery y cargue los archivos HTML por separado dentro de los marcadores de posición, identificándolos por ID.

Por ejemplo, en su página HTML principal:

<div id="mymenu"></div> 

Además, en el código HTML principal, pero en la sección HEAD:

$('#mymenu').load('navigation.html'); 

pero lo mejor sería cambiar a un hosting que admite PHP o cualquier otro servidor incluye. Esto hará que tu vida sea mucho más fácil.

Answer 6

Puede usar HTML Las importaciones http://w3c.github.io/webcomponents/spec/imports/

Aquí se muestra un ejemplo de http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html contiene

<div class="warning"> 
    <style scoped> 
     h3 { 
     color: red; 
     } 
    </style> 
    <h3>Warning!</h3> 
    <p>This page is under construction</p> 
    </div> 

    <div class="outdated"> 
    <h3>Heads up!</h3> 
    <p>This content may be out of date</p> 
    </div> 

Entonces index.html podría contener

<head> 
    <link rel="import" href="warnings.html"> 
</head> 
<body> 
    ... 
    <script> 
    var link = document.querySelector('link[rel="import"]'); 
    var content = link.import; 

    // Grab DOM from warning.html's document. 
    var el = content.querySelector('.warning'); 

    document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body>