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);
}
}
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>
<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');">
Acerca del Autor
6 comentarios:
hola!! como limitas el area del div contenido? lo he probado tal cual lo pones y se muestra el archivo html a pantalla completa superpuesto, sin limites.
saludos y gracias!!!
Hola!
En algún ejemplo he dado las siguientes propiedades al div contenido:
#contenido {
position:absolute;
left:564px;
top:202px;
width:364px;
height:521px;
}
Con esto le dices donde quieres que se presente el div contenido y las dimensiones del mismo. Si por algún motivo tu html que incrustas en el div es de un tamaño mayor y necesitas que salga una barra de scroll, utiliza la propiedad:
overflow:auto;
Espero que te sirva
Un saludo
Hola Carlos muchas gracias por tu post. Es posible que haya algún problema en Internet Explorer 7?
Me aparece un error javascript cuando hago click sobre el menú, más específicamente en la línea 11, carácter 4.
Muchas gracias y saludos!
Hola!
Si con IE hay que procurar que en el html de vas a cargar no contenga ninguna cabecera ni etiquetas de html y body, ya que generaría un error al incorporar este código dentro del frame principal que llama. Quita todo ese código del html que llamas, deja sólo el código propio de ese div y prueba, a ver si con eso solucionas el error.
Un saludo
Hola, excelente metodo para evitar los iframe, pero realize una pruebas y solo lee html, existe otra forma de leer también otras extensiones como php
Pero a mi no me sirvio si el iframe es de una web externa q no es mia.. me refiero si quisieras hacer un iframe a google ya no serviria? es posible hacer esto?
Publicar un comentario
Tú comentario/agradecimiento es bienvenido!