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