如何給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動態調整高度

回答

相關問題