javascript - iframe通信中的post消息有键值系统吗

Question

我的 iframe 代码 链接是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);
            }

从此我需要将 div 的高度传递到主站点

现在我还想将另一个参数传递到主站点

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

我的代码在主站点，即 WordPress 站点的 single.php

<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>

注意我无法根据 event.origin 检查，因为链接包含参数 例如 example.com?pd=123

此链接可能会更改

Answer 1

您可以将这组项目作为对象传递:

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

在您的示例中，“event.data”将包含传递的对象。例如:

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

参见https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage#The_dispatched_event了解更多详情。