Es posible la comunicación entre dos paginas html dentro el mismo server mediante Js?

[Albuss]

Buenas!

Tengo una duda, si dentro mi index tengo un iframe que es una pagina html dentro de mi mismo server, y quiero que un script Javascript del index inicie un evento dentro del iframe que es como ya he dicho una pagina mas html dentro de mi server?

Obviamente los scripts Js están incluidos en ambas paginas mediante un src, pero para modificar clases o id ya es distinto, alguien me saca de dudas? es posible?

En realidad no es un Iframe, utilizo la propiedad <Object></object> (como w3c recomienda) en vez del <iframe></frame>

he aqui como declaro el objeto: <object type="text/html" data="Menu.html" id="IframePortada" ></object>

Ps. he probado con esto, pero no consigo que funcione :

Código Javascript:

window.frames.IframePortada.document.getElementById('MiIDdentroDelIframe').className = ('LaClaseDelIframeQuequieroAñadirAlId');
 

*IframePortada es el iframe que quiero modificar, su ID

[IsaBelM]

hace tiempo lo intenté y no fui capaz. evidentemente no puedes accesarlo usando la propiedad frame, has de usar getElementById() o getElementsByTagName().

si usas la consola, verás que se crea un nodo #document y dentro de éste, está el contenido. ahí me quedé por que no supe como acceder

[David]

Para la mayoría de los navegadores contentDocument va a servir, desconozco si hay alguna opción para Internet Explorer (en versiones anteriores)

[Albuss]

Es que encontre una respuesta en este mismo foro donde se afirmaba que si era posible, pero no me funciona.

Iniciado por Saruman

window.frames['nombre_frame'].document.getElementById("nombre_div_dentro_del_if rame").style.padding = '10px';

saludos

Mi objeto Object funciona en la practica como un iframe.

[Albuss]

Iniciado por David

Para la mayoría de los navegadores contentDocument va a servir, desconozco si hay alguna opción para Internet Explorer (en versiones anteriores)

A que nodo se lo aplico ? a la id del object?

[David]

Sí, al object:

Código Javascript:

document.getElementById("id_del_object").contentDocument
 

[Albuss]

el debugger me tira este error : TypeError: Cannot read property 'contentDocument' of null

he utilizado esta sintaxis :

Código Javascript:

function CambiarClaseDesdeFueraDelIframe(){
    
RutaIframe=window.document.getElementById("framePortada").contentDocument;
    
RutaIframe.document.getElementById('IdDelDiv').className = ('ClaseQueLeQuieroAñadir');  
    }
 

[David]

¿El id no era IframePortada?

[Albuss]

Perdón, lo he transcrito mal, si, el id es "IframePortada", me sigue tirando el mismo error. Uncaught TypeError: Cannot read property 'contentDocument' of null

[David]

Por un lado, en RutaIframe.document el document ya sobra, no debería estar. Pero el error parece indicarte que no se está obteniendo el elemento object.

[Albuss]

El object es el que posteé arriba,

Código HTML:

<object type="text/html" data="Menu.html" id="IframePortada" ></object>
 

El script JS esta incluido mediante src tanto en el index como en Menu.html (el frame), lo único que no esta incluido en ambas paginas es el documento CSS que tiene tanto el id como la clase que quiero aplicar. supongo que habria que indicar de algna forma que obtuviera primero la id y la clase y luego la aplicase , o por el contrario cuando guardo RutaIframe=window.document.getElementById("framePortada").con tentDocument; ya obtiene el id y la clase?

[Albuss]

He cambiado algunas cosas y he conseguido "pasar" el error anterior, ahora puedo guardar correctamente la variable RutaIframepero ahora tengo algunos problemas nuevos ...

el debugger me envia esto :

Unsafe JavaScript attempt to access frame with URL file:///F:/Vodoad/Menu.html from frame with URL file:///F:/Vodoad/index.html. Domains, protocols and ports must match.

Uncaught TypeError: Cannot call method 'getElementById' of null

La función sigue siendo igual :

Código Javascript:

RutaIframe = document.getElementById("iframePortada").contentDocument;
    
    RutaIframe.getElementById('IDdentrodelIframe').className = ('ClaseQueQuieroAñadir');
 

[David]

Es por la política del mismo origen. Tendrás que usar un servidor web en tu máquina local para probarlo, en lugar de acceder a los archivos .html como archivos.

[Albuss]

Lo estoy probando desde un server, el mismo en el que hosteo mi proyecto, lo que me preocupa es que no pueda obtener la clase, ya que esta en un src que solo esta declarado dentro del cuerpo del Objec (Del frame).


No seria mas simple, sabiendo que ambos documentos comparten el mismo archivo de texto que contiene los scripts Js, que un evento dentro del index inicie otro evento dentro del Object?


Aunque me huelo que esta pregunta es redundante, aun me parece un poco complicado el objecto Object de html5, y no se muy bien bajo que propiedades opera.

[emprear]

Iniciado por Albuss

Lo estoy probando desde un server, el mismo en el que hosteo mi proyecto, lo que me preocupa es que no pueda obtener la clase, ya que esta en un src que solo esta declarado dentro del cuerpo del Objec (Del frame).


No seria mas simple, sabiendo que ambos documentos comparten el mismo archivo de texto que contiene los scripts Js, que un evento dentro del index inicie otro evento dentro del Object?


Aunque me huelo que esta pregunta es redundante, aun me parece un poco complicado el objecto Object de html5, y no se muy bien bajo que propiedades opera.

Si @albuss, tiene un comportamiento muy particular para ciertas cosas, decididamente usaría un iframe ó ajax. De todas maneras hay un método alternativo para lograr la comunicación, algo rebuscado si se quiere (nos valemos de una script auxiliar que recibe prámetros por get), pero ahi va.
Como explicarlo es un poco dificil, dejo un link con diferentes variantes
http://foros.emprear.com/object/object-iframe/

Saludos

[Albuss]

Muchas gracias por el aporte!

[IsaBelM]

emprear me ha dado la idea

<object type="text/html" data="Menu.html?css=LaClaseDelIframeQuequieroAñadirAlId" id="IframePortada" ></object>

en Menu.html

<style type="text/css">
.LaClaseDelIframeQuequieroAñadirAlId {
color: red;
}
</style>
<script type="text/javascript">
function fnc() {
document.getElementsByClassName('elemento')[n].className = window.location.search.split('=')[1];
}

window.onload = function() {fnc();};
</script>

[Albuss]

Una gran idea, pero finalmente he optado por utilizar ajax, pasar datos por get entre ficheros para que los lea JS tiene fallas de seguridad según he leido.

[IsaBelM]

creo que te refieres a ataques xss. en este caso no, puesto que la url la creas tú. si te va bien ajax, perfecto