Con AJAX:
en página principal pones el código para hacer la llamada a la otra página
Código:
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
// Esta función cargará las paginas
function llamarasincrono(url, id_contenedor){
ajax = objetoAjax();
ajax.onreadystatechange=function(){ // función de respuesta
if (ajax.readyState == 4){
retornado = cargarpagina(ajax, id_contenedor);
eval(retornado);
}
//alert(retornado);
}
ajax.open('GET', url, true); // asignamos los métodos open y send
ajax.send(null);
}
function cargarpagina(pagina_requerida, id_contenedor){
var valor = pagina_requerida.responseText;
var elem = valor.split('[JS]');
document.getElementById(id_contenedor).innerHTML = elem[0];
//alert(elem[1].length);
return elem[1];
}
<body>
<p>aquí el contenido inicial que se sustituirá por el del div cuando se cargue</p>
<div id="informacion"></div>
<div onlick="llamarasincrono('frame.php', 'informacion'"> clic para mostrar el div</div>
y en frame.php
Código:
//
Pones el contenido que quieres para el div "información" sin headers ni nada. En principio (solo en principio aunque este codigo te podría cargar javascript también) no debe tener codigo javascript solo html. Los atributos se los das al div.
Bueno, algo así sería. Prueba primero con textos y luego vas mejorando.
Saludos