KOMPOOS.NL

onmessage - HTML5

home » manuals » html5 » onmessage.html

sitemap | terug naar het html5 referentie - events - overzicht

voorbeeld van een procedure met onmessage er in verwerkt

uitleg onmessage event

Met behulp van onmessage kan je cross-domain gegevens uitwisselen. In dit voorbeeld wordt de cursor-positie van een domein, getoond op een ander domein (in een iframe). Om dit voorbeeld op jouw eigen site te reproduceren moet je de twee iframes op een willekeurige pagina plaatsen, en twee pagina's maken (op hetzelfde- of een ander domein) en de iframes daar naar laten verwijzen middels de src van het iframe. In plaats van de cursor positie kan je natuurlijk elk soort data uitwisselen. Verander de procedure dusdanig dat het een nuttige functie op jouw website krijgt.

de twee iframes voor de onmessage procedure


<iframe src="onmessage-1.html" width="200" height="80">nbsp;</iframe> 
<iframe src="onmessage-2.html" width="200" height="80">nbsp;</iframe>

complete pagina onmessage-1.html


<!DOCTYPE html><html lang="nl">
<head>
        <title>onmessage-1.html</title>
</head>
<body>
<div id="domein"></div>
<br>
<div id="muis_positie"></div>
<script type="text/javascript">
  window.onload = function() {
    document.getElementById('domein').innerHTML = 'Domein: ' + document.location.host;
    window.document.onmousemove = function(e) {
      var x = (window.Event) ? e.pageX : window.event.clientX;
      var y = (window.Event) ? e.pageY : window.event.clientY;
      window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*');      
    };
    var onmessage = function(e) {
      var data = e.data;
      var origin = e.origin;
      document.getElementById('muis_positie').innerHTML = data;
    };

    if (typeof window.addEventListener != 'undefined') {
      window.addEventListener('message', onmessage, false);
    } else if (typeof window.attachEvent != 'undefined') {
      window.attachEvent('onmessage', onmessage);
    }
  };
</script>
</body>
</html>

complete pagina onmessage-2.html


<!DOCTYPE html><html lang="nl">
<head>
        <title>onmessage-2.html</title>
</head>
<body>
<div id="domein"></div>
<br>
<div id="muis_positie"></div>
<script type="text/javascript">
  window.onload = function() {
    document.getElementById('domein').innerHTML = 'Domein: ' + document.location.host;
    window.document.onmousemove = function(e) {
      var x = (window.Event) ? e.pageX : window.event.clientX;
      var y = (window.Event) ? e.pageY : window.event.clientY;
      window.parent.frames[0].postMessage('x = ' + x + ' y = ' + y, '*');      
    };
    var onmessage = function(e) {
      var data = e.data;
      var origin = e.origin;
      document.getElementById('muis_positie').innerHTML = data;
    };

    if (typeof window.addEventListener != 'undefined') {
      window.addEventListener('message', onmessage, false);
    } else if (typeof window.attachEvent != 'undefined') {
      window.attachEvent('onmessage', onmessage);
    }
  };
</script>
</body>
</html>