Question

我尝试使用click事件从iframe接收变量以将消息发送到父（跨域）。想要使用接收消息信息更改iframe的高度。多次尝试但没有任何效果。

这是在父级中使用的脚本：

<script type="text/javascript">
jQuery(function($){
    $(window).bind('message', function(event){
        var height,
        oEvent = event.originalEvent; 
        if (oEvent.origin != 'http://some-domain-name.com') { 
            return false;
        } else {
            $('#autoIframe').css('height' , height + 'px');}
    });
});
</script>

这就是我在iframe的域名中使用的内容：

<script>
if (top != self) {
    jQuery(function($) {
        if (!!window.postMessage) {
            $('#bestellen_oben').click(function(){
                parent.postMessage('5000', '*');
            });
        }
    })
} 
</script>

有人有想法吗？

谢谢！

Answer 1

您的代码非常接近，需要以下内容才能使其正常工作：

如果您使用本地文件（我刚刚做过）在Chrome中对此进行测试，Chrome的本地文件政策将不允许这样做。可能有一些修复，但我不知道它是什么。最简单的方法是在本地Web服务器上使用它。有关详细信息，请参阅此问题：Using iframe with local files in Chrome
您缺少“height”变量的分配 - 您在帖子消息中传递数据但不读取它。
要使您的原始验证更简单，请将发布消息来源与window.location.origin进行比较。

父代码的工作版本是：

<script type="text/javascript">
jQuery(function($){
    $(window).bind('message', function(event){
        var height,
        oEvent = event.originalEvent; 
        if (oEvent.origin != window.location.origin) {        // compare against window.location.origin
            return false;
        } else {
            height = parseInt(oEvent.data);                   // make sure to assign height
            $('#autoIframe').css('height' , height + 'px');}
    });
});
</script>

（iframe代码在我测试时按原样运行，不需要进行任何更改。）

从iframe到具有click事件的父级的postMessage

1 个答案: