如何给iframe动态调整高度

我在我的站点通过iframe加载跨域页面url。像下面如何给iframe动态调整高度

<iframe class="iframeId" src="cross domain... /view/id/100" scrolling="no"></iframe>

我想加载页面后设置iframe的高度如果我使用下面的代码得到了一些错误，跨网域网址

$('.iframeId').load(function() { 
    this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; 
});

错误是“错误：权限被拒绝访问财产'文件'“。我的目标是在没有滚动条的iframe中加载页面。那么我该如何解决这个问题？

来源

2013-10-21 rajesh

试试这个$（本）.outerHeight（真） ;或$（this）.css（“height”）; – avalkab

您在此处遇到same origin policy问题。如果来自与母文档相同的域的而不是，则您无权访问iframe。你不能改变它的风格。
但是，如果您能够开发iframe指向的URL的内容，则可以使用message事件和postMessage方法尝试。你父文档可以做

$('#iframeId').load(function() { 
    $('#iframeId').get(0).contentWindow.postMessage('requestHeightChange', '*'); 
});

然后在iframe文档应该听message事件

$(window).on('message', function(e) { 
    var data = e.data; 
    if (!data) data = e.originalEvent.data; 
    if ("requestHeightChange" == data) { 
     window.parent.postMessage("setHeight:" + document.body.offsetHeight, "*"); 
    } 
});

你父文档也应该听message事件以来，没有区分它们之间的消息来自哪个iframe，你必须在消息data中提供它。 event.data是唯一可能由postMessage发送的数据。家长的事件监听器可能是这样的：

$(window).on('message', function(e) { 
    var data = e.data; 
    if (!data) data = e.originalEvent.data; 
    data = data.split(":"); 
    if ("setHeight" == data[0]) { 
     $('#iframeId').height(data[1] + "px"); 
    } 
});

要了解更多关于postMessage参考MDN。

来源

2013-10-21 14:07:12 matewka

这对我有用谢谢@matewka – rajesh

如果您无权访问这两个域，则无法解决此问题。想想安全漏洞，如果你能够做到这一点。

如果您确实可以访问这两个域，技巧是将适当的高度从一个域传递给另一个域。

来源

2013-10-21 13:55:31

由于same origin policy的原因，您无法更改或访问从其他域加载的iframe的属性。

来源

2013-10-21 13:58:24

嗨，

能否请您尝试以下....

> <script type="text/javascript"> 
>  $(document).ready(function() { 
>   $('.iframeId').height($(document).height()); 
>  }); 
> </script>

谢谢维沙尔帕特尔

来源

2013-10-21 14:25:37

如何给iframe动态调整高度

回答

相关问题