Steven Dullaert
Om te beginnen: dit kan alleen als je controle hebt over de broncode van zowel child als parent
Soms heb je de behoefte om te communiceren van een child iframe naar zijn parent in een cross domain omgeving.
Dit is hoe het kan worden gedaan met behulp van JS/jQuery, en een aantal mooie jQuery plugins.
Download de $.postMessage plugin van http://benalman.com/projects/jquery-postmessage-plugin/
Op de parent implementeert u deze functies:
function initIframe(url, height){ var src = url + '&#' + encodeURIComponent( document.location.href ); var location = window.location; $.receiveMessage(function(e){ handleIframeMsg($.deparam( decodeURIComponent(e.data) )); },window.location); var iframe = $( '<iframe src="https://www.calibrate.be/%27%2Bsrc%2B%27" width="100%" height="'+height+'" allowtransparency="true" frameborder="0" border="0" style="border:0 none;"></iframe>' ).appendTo( '#iframe' ); } function handleIframeMsg(obj){ if(obj.action){ switch(obj.action){ case "resize": if(obj.params && obj.params.height) $('#iframe iframe').attr('height',obj.params.height); if(obj.params && obj.params.width) $('#iframe iframe').attr('width',obj.params.width); break; } } }
De functie initIframe initialiseert het iframe:
Parameters:
- url: the iframe URL
- height: the height of the iframe
Het zal de huidige documentlocatie aan de iframe-url toevoegen voor gebruik in de iframe, en $.receiveMessage bellen voor het opvangen van de verstuurde iframe-berichten.
Functie handleIframeMsg verwacht een obj met een eigenschap 'actie' (u kunt dit op elke gewenste manier implementeren), ik laat u hier alleen de grootteverandering van het iframe zien. Dit object is gemaakt door middel van een vertrek-functie (bijgevoegd bij dit bericht), en doet het tegenovergestelde van jQuery's $.param functie.
Dit moet worden geïmplementeerd in het kind (de iframe).
function sendToParent (obj){ var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) ); $.postMessage(obj,parent_url,parent); }
en kan zo getriggerd worden:
sendToParent({action:"resize", params:{height:200, width:100}})
