Solució envia i confirma missatge

De wikiserver
Dreceres ràpides: navegació, cerca

Codi html de l'exercici :

<html>
<head>
<script type="text/javascript" src="missatges.js"></script>
<style type="text/css">
	html
	{
		font-family: "courier new";
	}
</style>
</head>
<body >
    Finestra Principal. PAs de missatges
    <button onClick="openWindow();">obrir finestra</button>
    <button onClick="sendMessage();">enviarMissatge</button>
    <div id="resposta"></div>
</body>
</html>

Codi Javascript de l'exercici :

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(win.prompt('Contesta:'), "*");
    }
     
}

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);
    }
}