Alternativa a los iframes con CSS, DIV y AJAX

Código Javascript

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