Solució Finestres2

De wikiserver
Dreceres ràpides: navegació, cerca
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">


            var win;
            //es crea un listener per si algú es vol comunicar amb la finestra principal 
            window.addEventListener("message", listener2, false);
            function listener2(event) {
                //modifica el div resposta i posa el missatge que l'han enviat'      
                document.getElementById("resposta").innerHTML = event.data;
            }
            function openWindow() {
                // es crea la finestra   
                win = window.open('', 'exemple', 'width=300,height=300');
                //es crea un element div amb informació dintre  
                var div2 = win.document.createElement('div');
                div2.setAttribute('id', 'mess');
                div2.innerHTML = "Hola a Totos";
                div2.style.fontSize = '15px';
                win.document.body.insertBefore(div2, win.document.body.firstChild);
                //s'associa una funció, anomenada listener'  que escolta si algú l'ha enviat informació'  
                win.addEventListener("message", listener, false);
                //es defineix la funció anomenada listener:  
                function listener(event) {
                    //modifica el div creat pel contingut enviat pel usuari de l'altre pàgina.'   
                    win.document.getElementById("mess").innerHTML = "rebut: " + event.data;
                    //es crea el missatge enviat des de win a ala finestra que origina l'event'    
                    event.source.postMessage('rebut, gracies!', "*");
                }
            }
            function sendMessage() {
                var text = prompt("Envia un text a la finestra que s'ha obert");
                try {        //enviem un missatge a la finestra win sense importar l'origen, per aixó possem '*' 
                    win.postMessage(text, "*");
                } catch (e) {
                    alert(e);
                }
            }

        </script>
    </head>
    <body>
         Finestra Principal. PAs de missatges   
         <button onClick="openWindow();">obrir finestra</button>  
         <button onClick="sendMessage();">enviarMissatge</button> 
         <div id="resposta"></div> 
    </body>
</html>


//Otra solución más simplificada

<html> 
    <head>
        <script type="text/javascript" >

            var win;

            function openWindow() {
                // es crea la finestra    
                win = window.open('', 'exemple', 'width=300,height=300');
                //s'associa una funció, anomenada listener'  que escolta si algú l'ha enviat informació'   
                win.addEventListener("message", listener, false);
              

                //es defineix la funció anomenada listener:   
                function listener(event) {
                   //modifica el div creat pel contingut enviat pel usuari de l'altre pàgina.'     
                   win.document.write("Recibido: " + event.data + " "+ event.source +" "+event.origin);
                   window.postMessage("Confirmado", "*");  // event.source.postMessage('rebut, gracies!', "*"); //envia al origen
                }


            }


            window.addEventListener("message", listener2, false);    //evento para la ventana Window, sólo se activará cuando la ventana pequeña le mande info
            
            function listener2(event) {
                   //modifica el div creat pel contingut enviat pel usuari de l'altre pàgina.'     
            window.document.write("Ventana Principal: " + event.data + " "+ event.source +" "+event.origin);
                  
           }


            function sendMessage() {
                var text = prompt("Envia un text a la finestra que s'ha obert");
                       //enviem un missatge a la finestra win sense importar l'origen, per aixó possem '*'   
                    win.postMessage(text, "*");   
                
            }
        </script> 
     
    </head>
    <body >    Finestra Principal  
        <button onClick="openWindow();">obrir finestra</button>  
        <button onClick="sendMessage();">enviarMissatge</button>  
        <div id="resposta"></div>
    </body>
</html>