En este artículo vamos a ver cómo podemos enviar datos a otro dominio desde nuestra aplicación. Es decir, resumiendo, vamos a implementar simplemente un intercambio de datos entre dominios. En algunos casos, es posible que tengas que enviar algunos datos que son necesarios para que otro dominio o aplicación funcione como es debido. No creáis que es un caso poco común, me ha pasado varias veces en mi vida como programador. Esta vez lo he implementado con la ayuda del método de postMessage. Por si no lo sabéis, el método window.postMessage nos ayuda a habilitar una comunicación de cross-origin. Espero que te guste este tutorial.
Para llevar a cabo esto, me vi obligado a mantener unas cookies en mi segunda aplicación todo el rato. Así que he implementado esto con la ayuda de window.postMessage. A efectos de demostración, he creado dos aplicaciones:
- CrossDomainDataSharing
- Receiver
El código
En primer lugar, nos centraremos en la aplicación CrossDomainDataSharing desde la cual enviamos nuestros datos hacia la aplicación Receiver.
Para empezar, necesitas agregar la referencia de jQuery a tu página. Y para darle un poco de modernidad a la aplicación, he añadido Smart Alert. Puedes ver las referencias necesarias y los estilos más abajo.
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="js/alert.min.js"></script>
<link href="css/alert.min.css" rel="stylesheet" />
<link href="themes/dark/theme.css" rel="stylesheet" />
Lo próximo es la función "Calling Window On Load".
window.onload = function () {
document.getElementById('btnSend').addEventListener('click', sendData);
};
Aquí sólo agregamos un evento de clic al botón con id btnSend. Antes de agregar el evento, por favor asegúrate de que has creado el botón.
<button id="btnSend">Send Feedback</button>
El siguiente paso es crear un iframe y poner el enlace de nuestra segunda aplicación en el valor src.
<iframe id="ifrLoad" src="http://localhost:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html" style="display: none;">
<p>Oops!. Your browser does not support iframes.</p>
</iframe>
¿Has visto que hemos llamado a la función sendData? Veamos lo que hace esta función.
function sendData(e) {
try {
$.alert.open('prompt', 'Please send your feedback!.', function (button, value) {
if (button == 'ok') {
e.preventDefault();;
var myIfr = window.frames['ifrLoad'].contentWindow;
myIfr.postMessage(value, 'http://localhost:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html')
$.alert.open('Thank you so much for your feedback.' || 'No value has been entered');
}
});
} catch (e) {
console.log('Error: ' + e.message);
}
}
Lo que hemos creado es una alerta inteligente. En primer lugar, si el usuario dice 'Ok' pasaremos la información dada a nuestra segunda aplicación con la ayuda del método postMessage. Como ves, la aplicación es bastante simple.
Puedes darle estilo al botón de la siguiente manera.
<style>
#btnSend {
margin-left: 11px;
border: solid 1px #000;
padding: 9px 22px 7px;
min-width: 32px;
font-weight: bold;
line-height: 13px;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
background-color: #232323;
background-image: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -webkit-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -moz-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -o-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -ms-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
-pie-background: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
#btnSend:hover {
background-color: #404040;
background-image: linear-gradient(#515151 1%, #2e2e2e);
background-image: -webkit-linear-gradient(#515151 1%, #2e2e2e);
background-image: -moz-linear-gradient(#515151 1%, #2e2e2e);
background-image: -o-linear-gradient(#515151 1%, #2e2e2e);
background-image: -ms-linear-gradient(#515151 1%, #2e2e2e);
-pie-background: linear-gradient(#515151 1%, #2e2e2e);
box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
</style>
Y esto es todo lo relacionado con la parte del envio. Puedes ver el código completo de nuestra primera aplicación aquí.
<!DOCTYPE html>
<html>
<head>
<title>Cross Domain Data Sharing Demo - Sibeesh Passion</title>
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="js/alert.min.js"></script>
<link href="css/alert.min.css" rel="stylesheet" />
<link href="themes/dark/theme.css" rel="stylesheet" />
<style>
#btnSend {
margin-left: 11px;
border: solid 1px #000;
padding: 9px 22px 7px;
min-width: 32px;
font-weight: bold;
line-height: 13px;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
background-color: #232323;
background-image: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -webkit-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -moz-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -o-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
background-image: -ms-linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
-pie-background: linear-gradient(#2b2b2b 1%, #1d1d1d 99%);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
#btnSend:hover {
background-color: #404040;
background-image: linear-gradient(#515151 1%, #2e2e2e);
background-image: -webkit-linear-gradient(#515151 1%, #2e2e2e);
background-image: -moz-linear-gradient(#515151 1%, #2e2e2e);
background-image: -o-linear-gradient(#515151 1%, #2e2e2e);
background-image: -ms-linear-gradient(#515151 1%, #2e2e2e);
-pie-background: linear-gradient(#515151 1%, #2e2e2e);
box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-webkit-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-moz-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-ms-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-o-box-shadow: 0 1px rgba(2, 3, 3, 0.5), 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
</style>
<script>
window.onload = function () {
document.getElementById('btnSend').addEventListener('click', sendData);
};
function sendData(e) {
try {
$.alert.open('prompt', 'Please send your feedback!.', function (button, value) {
if (button == 'ok') {
e.preventDefault();;
var myIfr = window.frames['ifrLoad'].contentWindow;
myIfr.postMessage(value, 'http://localhost:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html')
$.alert.open('Thank you so much for your feedback.' || 'No value has been entered');
}
});
} catch (e) {
console.log('Error: ' + e.message);
}
}
</script>
</head>
<body>
<button id="btnSend">Send Feedback</button>
<iframe id="ifrLoad" src="http://localhost:55592/Receiver/Cross-Domain-Data-Sharing-Receiver.html" style="display: none;">
<p>Oops!. Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Ahora nos centraremos en nuestra segunda aplicación, "Receiver"
Nos limitaremos a añadir una función window load con un event listener que recoja los datos de nuestra primera aplicación. Por favor, échale un vistazo al siguiente código para quede más claro.
$(window).load(function () {
window.addEventListener('message', addData);
function addData(e) {
document.cookie = "myData=" + e.data;
};
});
Por aclarar, myData es el nombre de la cookie.
Puedes ver el código completo de nuestra segunda aplicación aquí.
<!DOCTYPE html>
<html>
<head>
<title>Cross Domain Data Sharing Receiver - Sibeesh Passion</title>
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script>
$(window).load(function () {
window.addEventListener('message', addData);
function addData(e) {
document.cookie = "myData=" + e.data;
};
});
</script>
</head>
<body>
</body>
</html>
Y este ha sido el artículo en el que trataba explicaros cómo enviar datos a otro dominio utilizando postMessage, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!