Voy a optar por el iframe. Me va a permitir tener las páginas y el código bien organizado. Me apunto el async js para otros proyectos.
Ando buscando truquillos y me encontré algo curioso:
https://jakearchibald.com/2016/fun-hacks-faster-content/No lo voy a usar pero es digno de comentar!
No recomiendo Iframe:
Parece que el iframe da problemas con Android. Al pinchar en un input text dentro de un iframe, el iframe se desplaza. Tras ajustarlo par hacerlo inmovil, pasa algo curioso, como no se puede mover, el teclado tapa el campo donde vas a escribir. Si escribes; o no ves lo que escribes o el iframe se mueve de forma inadecuada para dejarte ver el texto. Igual se puede arreglar, pero no me gusta la idea de hacer un arreglo con truquillos porque no sabes como va a funcionar en todas las resoluciones y distintos navegadores.
Recomendado:
Al final opté por la opción de incluir directamente el propio código de las diversas páginas dentro de la página página principal ya que no va a ser mucho y cambiar los estilos con javascript. Si ya manejas no hace falta que leas más.
El iframe daba bastantes problemas en Android y no quería comportmientos imprevisibles en distintas plataformas y navegadores. Era mi opción favorita pero lo descarté tras tenerlo implementado.
Entonces pensé en "importar" las diversas páginas de la misma forma que se importan el js y el css para después parsearlo. Buscando una buena forma de hacerlo, me encontré con HTML5 imports. Tras buscar en la página de Mozilla, lo descarté también. Parece que es una tecnología obsoleta, o se intenta no darle soporte.
A continuación valoré usar Fetch con un polyfill, xhr o ajax. Al ser poco contenido, decidí no utilizar este método por los siguientes motivos:
-El tiempo del envio de petición y la solicitud de respuesta.
-Requiere post-procesado ya que va a descargar páginas independientes para integrarlas.
-Añade un vector de ataque a la página o a sus usuarios que puedo evitar.
-Al ser común que se repitan peticiones a la misma página, requiere que las guarde tras descargarse al principio para no hacer una petición cada vez que se pinche un enlace.
-El contenido de las páginas externas es muy poco probable que vaya a ser modificado durante el uso de la página principal. Y en caso de cambiar el contenido, no va a afectar al usuario.
Puede que al hacer las descargas de forma asíncrona no sea un método tan lento en comparación.
Se cargan toda las páginas y se les cambia el display a cada id y el visibility. En el botón blanco encima del header se abre la ventana con los diversos links. Le añadí así por encima un form, texto y alguna etiqueta para que se vea que se cambia el contenido. Con la ventana hago lo mismo de no mostrarla para ese efecto de que se cierra al pulsar un link.
http://stringmanolo.byethost12.com/dhunter/indexBUENO.html En el HTML añadí el código de las páginas en varios articles dentro de una sección de páginas. Agregué un id a cada uno por ahorrarme un bucle y lios si añado más sections o articles dentro de cada article.
<article id="HowTo">
<h2>Welcome To DHunter.
</h2> <li>Shoot A Dictionary
</li> ...
</list>
</article>
<article id="Github">
Aquí abra algo de github
</article>
<article id="Download">
Aqui links de descarga.
</article>
<article id="Bugs">
<h2>Please! Help us make this site more secure toward our users.
</h2> <list>TOP HUNTERS:
</list>
...
En el CSS los pongo como invisibles desde el principio, para que no se vean al cargar la página:
#HowTo, #Github, #Download, #Bugs {
display: none;
visibility: hidden;
}
En el javascript hago lo siguiente:
Obtengo los elementos a href de los hipervínculos.
Le añado EventListeners a la espera de un click en el enlace a todos ellos.
Declaré un par de funciónes para ser llamadas en cada click que le aplica los estilos a cada elemento:
function doNotShow(arrayElements) {
for(var i = 0; i < arrayElements.length; ++i) {
arrayElements[i].style.display="none";
arrayElements[i].style.visibility="hidden";
}
}
function Show(arrayElements) {
for(var i = 0; i < arrayElements.length; ++i) {
arrayElements[i].style.display="block";
arrayElements[i].style.visibility="visible";
}
}
La expresión final es esta:
LINK5.addEventListener("click", function(){DefStyle();doNotShow([MAIN, Download, Bugs, Github]);Show([HowTo])});
LINK5 es un getElementById a uno de los a href. (El "HowTo")
Todo lo que hay dentro de los corchetes de
function (cuerpo de la función anónima), son las expresiones que se evaluan al hacer click en el link (el elemento al que referencia el objeto).
DefStyle son estilos que aplico por defecto para ocultar el modal/ventana y los links mostrados en ella.(Para dar la sensación de que se cierra la ventana al abrir el link) Y mostrar el botón que abre la ventana.
A la función doNotShow le paso por parámetro un array con todos los elementos que quiero esconder. Y con Show lo mismo para los elementos que quiero mostrar.
En el caso de LINK5 que es un
<a href="#HowTo"> oculto todas las páginas (articles) menos la de HowTo.
La sintaxis se puede reducir mucho. Yo lo he echo así por mayor versatilidad a la hora de introducir cambios.
Para reducir el código:
Modificando LINK1 LINK2 LINK3... Por el array devuelto de la expresión LINKS = getElementsByTagName("articles"); O className también vale.
Obteniendo los elementos en un array PAGINA de la misma forma que LINKS.
Haciendo un contador estático intermitente para las llamadas, o pasando un booleano para saber cuando mostrar o esconder utilizando la misma función. U otra opción es esconder todos los elementos en la función y trás la llamada mostrar el elemento.
Añadiendo la llamada a DefStyle() dentro de la otra función. Entonces quedaría:
for(var i = 0; i < LINKS.length; ++i) {
LINKS[i].addEventListener("click", function(){OcultarTodo();Mostrar(ArArr[i])});
}
Siendo ArArr[] un array con los article.
Así la expresión queda fácilmente por debajo de las 80 líneas de código que se suele recomendar no propasar para facilitar la lectura de código.
Autor
En línea
