Alternativa a los iframes con CSS, DIV y AJAX
Código Javascript
- Por Programador ASP clásico /
- 31/07/2012 @ 11:09:11 /
- 1005 visitas
Google no indexa bien las páginas que contienen iframes con lo cual si estás buscando como solucionar ese problema sin perder la funcionalidad de tu página o sin tener que hacer unos cambios muy importantes esta es una forma de hacerlo usando CSS, capas DIV y funciones de AJAX:
Archivo ajax.js:
var peticion = false;
if (window.XMLHttpRequest) {
peticion = new XMLHttpRequest();
} else if (window.ActiveXObject) {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
}
function cargarExterno(datos,divID) {
if(peticion) {
var obj = document.getElementById(divID);
peticion.open("GET", datos);
peticion.onreadystatechange = function() {
if (peticion.readyState == 4) {
obj.innerHTML = peticion.responseText;
}
}
peticion.send(null);
}
}
Cargamos el archivo ajax.js en la cabecera de nuestra página HTML de la forma:
<script type="text/javascript" src="ajax.js"></script>
En el HTML colocamos los enlaces que se van a cargar en el DIV principal que sustituye al iframe (div contenido):
<ul id="menu">
<li><a href="javascript:cargarExterno('pagina1.html','contenido');">Cargar
el html 1</a></li>
<li><a href="javascript:cargarExterno('pagina2.html','contenido');">Cargar
el html 2</a></li>
</ul>
<br>
<div id="contenido"></div>
Si queremos cargar inicialmente un fichero html en el div contenido, lo podemos hacer con el método onload del <body>
<body onload="javascript:cargarExterno('home.html','con tenido');">
tags: iframe, alternativas a iframe, paginas con div, pagina web con div, formulario html y css, div css, div loading jquery, iframe css, css iframe, transparent iframe, pagina web con css, iframe transparent