Comunidad de diseño web y desarrollo en internet online

como cargar una pagina html en un div contenedor ?

Citar            
MensajeEscrito el 10 Dic 2007 06:21 pm
Hola que tal espero que me puedan ayudar tengo esta pagina:
[url]
http://fosquiba.com/Josue/Prueba2.html
[/url]
donde al dar clic en cualquier opcion se cargara en un div contenedor llamada principal donde mando a llamar a la funcion que esta en unos de sus tutoriales:

Código :

<a href=  "javascript:llamarasincrono('tutorial1.htm', 'principal')></a>

utilizando la funcion que tienen para cargar paginas en forma asincrona en un div contenedor

Código :

// Esta función cargará las paginas
function llamarasincrono(url, id_contenedor){
var pagina_requerida = false
if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest()
} else if (window.ActiveXObject){ // pero si es IE
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){ // en caso que sea una versión antigua
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
pagina_requerida.onreadystatechange=function(){ // función de respuesta
cargarpagina(pagina_requerida, id_contenedor)
}
pagina_requerida.open('GET', url, true) // asignamos los métodos open y send
pagina_requerida.send(null)
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina(pagina_requerida, id_contenedor){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText
}

Pero no me hace nada :s en el IE 6 me muestra en la barra de estado que tengo un error
document.getElementById(..) que me dice es nulo o no es un objeto pero en el IE7 no me hace nada y claro en el FF tampoco.
Como se fijan mi menu cambia de acuerdo al idioma y claro quiero cargar todas las paginas en ese div contenedor principal donde todas esas opciones las tngo en un arreglo definido en una funcion:

Código :

function menu(pos){
// Esta función define el menu de la página. El argumento <pos> indica la 
// posición que va a ir "activa".
   var ele = new Array;
   var link = new Array;
   var i = 0;
   var d = document; // para abreviar
   var total = 4;
   ele[ele.length]='<span class="es">INICIO</span><span class="en">HOME</span>';          // 0
   ele[ele.length]='<span class="es">EMPRESA</span><span class="en">COMPANY</span>';       // 1
   ele[ele.length]='<span class="es">PRODUCTOS</span><span class="en">PRODUCTS</span>';      // 2
   ele[ele.length]='<span class="es">INSTALACIONES</span><span class="en">FACILITIES</span>';      // 3
   ele[ele.length]='<span class="es">CONTACTO</span><span class="en">CONTACT US</span>';         // 4
   //
   link[link.length]='llamarasincrono('tutorial1.htm', 'principal')';         // 0
   link[link.length]='#';      // 1
   link[link.length]='#';      // 2
   link[link.length]='#';      // 3
   link[link.length]='#';      // 4

d.writeln('   <ul id="navi">');

for(i = 0;i<=(pos-1);i++){
   d.writeln('<li><a href="'+link[i]+'">'+ele[i]+'</a></li>');      
} // For

d.writeln('<li><a href="'+link[pos]+'" id="actual">'+ele[pos]+'</a></li>');      

for(i = pos+1;i<=total;i++){
   d.writeln('<li><a href="'+link[i]+'">'+ele[i]+'</a></li>');      
} // For

d.writeln('   </ul>');
} // Generador de Menu
//
// Esta función cargará las paginas
function llamarasincrono(url, id_contenedor){
var pagina_requerida = false
if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest()
} else if (window.ActiveXObject){ // pero si es IE
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){ // en caso que sea una versión antigua
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
pagina_requerida.onreadystatechange=function(){ // función de respuesta
cargarpagina(pagina_requerida, id_contenedor)
}
pagina_requerida.open('GET', url, true) // asignamos los métodos open y send
pagina_requerida.send(null)
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina(pagina_requerida, id_contenedor){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText
}

mi problema es como hago para llamar la funcion llamarasincrono dentro de cada uno de los elementos de mi menu ya que lo intente llamandolo asi

Código :

link[link.length] = 'llamarasincrono('tutorial.htm','principal')';

pero tampoco hace nada espero que me echen la mano o no se que me falta :S
[/url]

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

msie7
Citar            
MensajeEscrito el 11 Dic 2007 05:44 am
Pues muy fácil compañero, creo que no leiste bien el tutorial de ajax... simplemente en el código que tienes asi:

Código :

<li><a href="#" title="Enlace generico">INICIO</a></li>


cambialo por algo así

Código :

<li><a href="javascript:llamaasincrono('contenido.html', 'idDeTuDiv');">INICIO</a></li>


Espero te sirva

Por lfgarcia

95 de clabLevel

1 tutorial

 

Gruyork, Mexico

firefox
Citar            
MensajeEscrito el 01 May 2009 02:27 pm
Hola!
Después de tiempo de consultar en estos foros, es la primera vez que hago una pregunta, porque creo que no doy con una solucion.

La cuestión la siguiente, llamo una pagina dentro de un DIV con la función javascript:llamarasincrono. Todo funciona perfectamente, pero cuando se carga la pagina dentro del div Contenidos, no se visualiza desde el inicio de esta. Se ve desde la mitad o el final, recogiendo la posicion del scrolllbar.

<a class="link" href="javascript:llamarasincrono('projectes/jardins/index.html', 'contenidos');">El jard&iacute;n... &gt; <span class="h4">editorial</span> </a>


Como se puede hacer, que cuando se muestra la pagina html dentro del div, la posicione a la inicio y no "heredando" la ultima posicion del scroll?!


Muchas gracias de antemano!!!

Por eee

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Jun 2009 07:36 pm
muchas gracias por el código esto me tenia ya como loco.

Ahora pregunto se pueden llamar anclas?
mi lógica decía que era:

<li><a href="javascript:llamaasincrono('contenido.html#ancla', 'idDeTuDiv');">INICIO</a></li>

pero la cosa no va

Por Dinael

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Mar 2011 09:44 pm
Hola a todos,

¿Alguien podría explicarme porque este código no funciona en IE8?

Agradecería alguna solución

Gracias.

Por antonio_spro

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 May 2011 12:39 am
Buenas!!
Alguien me puede echar una mano?
me gustaría saber si con este código puedo poner una pagina que contenga un easy slider. Me explico, tengo un submenu en el cual pincho y se abre una pagina dentro de la principal, y esta que se abre tiene un slider pero no me funciona.

Alguien me podía decir si es posible y sino es posible alguna sugerencia.

Muchas gracias por adelantado.

Por fuser28

1 de clabLevel



 

safari
Citar            
MensajeEscrito el 12 May 2011 06:41 am
Prueba a poner las librerias del easySlider en la página desde la que llamas a la que realmente tiene HTML del slider.

Saludos

Por neisserian89

65 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 May 2012 01:15 am
Hola e utilizado este metodo, pero me he encontrado con un problema
en el div contenedor deseo cargar una pagina.php que esta contiene sus propios CSS y codigos JS.
al cargar la pagina en el explorador carga perfectamente pero si la cargo en el DIV no obedece los CSS Y/O los JS
la pagina pruebas.php esta es la que quiero cargar en un DIV y contiene

Código HTML :

  
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
    <!-- exite problema con vanadium de este modo no carga las instrucciones -->
    <link href="../../CSS/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../Configuracion/vanadium-es.js"></script>
<title>Documento sin título</title>
</head>
<body>
<input type="text" name="TELEFONO" id="TELEFONO" class=":required :digits :min_length;10 :max_length;10" maxlength="10" value="" />
hola mundo
<p class="parrafo"> 
hola mundo</p>
</body>
</html>

mientras que la pagina principal es la siguiente

Código HTML :

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" media="all" type="text/css" href="SubMenu/menu_style.css" />
   <link rel="STYLESHEET" type="text/css" href="../CSS/Secundarios.css"> 
    <script src="../Configuracion/cargas.js"></script>

</head>
<body>
<div class="angel bubplastic vertical blue">
   <ul>
      <li><span class="menu_r"><a href="javascript:llamarasincrono('prueba.php', 'contenedor')"><span class="menu_ar">modificar</span></a></span></li>
   </ul> 
   
</div>
<div id="contenedor" class="contexto">
</div>
</body>
</html>


ya e intentado poner las CSS Y JV en la pagina principal pero aun así nada, alguna idea??

Por aams01

1 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.