Diferència entre revisions de la pàgina «Solució Finestres2»
De wikiserver
(Es crea la pàgina amb «<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the t...».) |
|||
| (Hi ha 2 revisions intermèdies del mateix usuari que no es mostren) | |||
| Línia 1: | Línia 1: | ||
| + | <source lang="javascript"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<!-- | <!-- | ||
| Línia 57: | Línia 58: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </source> | ||
| + | |||
| + | |||
| + | //Otra solución más simplificada | ||
| + | <source lang="javascript"> | ||
| + | <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> | ||
| + | </source> | ||
Revisió de 18:22, 23 oct 2018
<!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>
