Are there any key value system in post message in iframe communication

Question

My iframe Code Link is http://example.org?pd=123

            var currentHeight = $('.comments_holder').outerHeight();
            var parent = window.parent;
            var targetOrigin = "my parent site link";
            if (parent && parent.postMessage) {
                parent.postMessage(currentHeight, targetOrigin);
            }

From this i need to pass the height of the div to the main site

And now i also want to pass another parameter to main site

                var count = 123;
                var parent = window.parent;
                var targetOrigin = "my parent site link";
                if (parent && parent.postMessage) {
                    parent.postMessage(count , targetOrigin);
                }

And my code in main site i.e. single.php of wordpress site

<script>
jQuery(document).ready(function($){
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event)
{

what will if else condition here to get both the values 

} 

});
</script>

NOTE i cant check based on event.origin as the link are containing parameters for eg example.com?pd=123

And this link could be changing

score 1 · Accepted Answer · answered Aug 09 '14 at 06:46

1

You'd pass the set of items through as an object:

parent.postMessage({'height': currentHeight, 'stuff': 'foo'}, targetOrigin);

In your example "event.data" would contain the passed object. For example:

function receiveMessage(event) {
   console.log(event.data.height);
}

See https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage#The_dispatched_event for more detail.

answered Aug 09 '14 at 06:46

joeltine

1,655
14
15

but i want to post current height three times and stuff : foo only once – Vaibs_Cool Aug 09 '14 at 06:49
Lots of ways to do this... for example you could pass an extra field to postMessage signifying its "type": postMessage({'type': 'height', 'height': currentHeight'},...) or postMessage({'type': 'foo', 'foo': 'value'}, ...); Then just inspect event.data.type in receiveMessage and do the right thing. – joeltine Aug 09 '14 at 06:54
I am getting undefined in console for event.data.type – Vaibs_Cool Aug 09 '14 at 07:10
i am using chrome browser – Vaibs_Cool Aug 09 '14 at 07:11
What does your postMessage call look like? – joeltine Aug 09 '14 at 07:40

Are there any key value system in post message in iframe communication

1 Answers1

Linked