iframe cross domain messaging with jQuery postMessage plugin
Solution 1
Never used that plugin, can't really say what's wrong with it, but, alternately you can use HTML 5 postMessage.
Since you want to send data to the iframe, register an event listener on it:
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.origin == '*') {
return;
} else {
console.log(e.data);
}
}
Be sure to check origin against your trusted domain to prevent damage, instead of "*" which will accept all.
Now you can call
message = "data";
iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage(message, '*');
Again, you should change "*" with the destination domain.
Solution 2
1.sendPage
<script type='text/javascript'>
var sendpost = document.getElementById('wrapper').scrollHeight;
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
target.postMessage(sendpost,'*');
</script>
2. real iframe load page
function handling(e){
sendIframeHeight = e.data;
}
// <= ie8
if (!window.addEventListener) {
window.attachEvent("onmessage", handling);
}else{ // > ie8
window.addEventListener('message', handling, false);
}
Solution 3
I had a similar requirement and ended up using postMessage to send data from the child to the parent. Then, to send data from the parent to the child, I passed the data in a query string through the iframe's src attribute. By doing so, I could then parse the query string and retrieve the data within my child page.
RyanP13
Updated on July 09, 2022Comments
-
RyanP13 almost 2 years
I am trying to communicate between a child iframe and its parent using the following plugin:
http://benalman.com/projects/jquery-postmessage-plugin/
I can follow the example and post a message from the child to the parent but not the other way and i really need to be able to communicate both ways.
The code on the parent is as follows:
var origin = document.location.protocol + '//' + document.location.host, src = origin + '/Custom/Ui/Baseline/html/iframe-data-cash.htm#' + encodeURIComponent(document.location.href); $(function () { var $holder = $('#iframe'), height, $iframe = $('<iframe src="' + src + '" id="data-cash-iframe" width="100%" scrolling="no" allowtransparency="true" seamless="seamless" frameborder="0" marginheight="0" marginwidth="0"></iframe>'); // append iframe to DOM $holder.append($iframe); }); $(window).load(function () { $.postMessage( 'hello world', src, parent.document.getElementById('data-cash-iframe').contentWindow ); });
And the code on the child is as follows:
$(function () { var parentURL = decodeURIComponent(document.location.hash.replace(/^#/, '')); $.receiveMessage( function (e) { alert(e.data); }, parentURL ); });
I really cannot see why this is not working and am in desperate need of help!