3

我试图使用点击事件从 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>

有人有想法吗？

谢谢！

4

1 回答 1

4

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

  • 如果您在 Chrome 中使用本地文件进行测试（我刚才所做的），Chrome 的本地文件策略将不允许这样做。可能有一些修复它，但我不知道它是什么。最简单的就是在本地 Web 服务器上使用它。有关更多信息，请参阅此问题：在 Chrome 中将 iframe 与本地文件一起使用

  • 您缺少“高度”变量的分配 - 您在帖子消息中传递数据但不阅读它。

  • 为了使您的来源验证更简单，请将帖子消息来源与 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 代码按原样工作，无需更改。）

于 2013-08-21T01:24:10.800 回答