當源位於另一個域上時，如何更改IFRAME高度？

Question

我認為此選項不可用，但也許您知道一些這樣做的策略！ 我在http://www.mydomain.com上，並用另一個域的jquery放置了一個iframe：

<div id="myContent"></div>

$('#myContent').html('<iframe id="myFrame" src="www.anotherdomain.com"></iframe>');

好吧，我加載的頁面www.anotherdomain.com是我的，因此我可以添加任何類型的代碼！

我想做的是根據已加載頁面的實際大小設置myFrame的高度（我不知道，它會隨時間變化）。

有沒有一種方法可以將插入頁面（anotherdomain.com）的大小與父DOM（mydomain.com）進行通信？

我不知道，我對此很懷疑，但是為什么不問。

Answer 1

您可以使用postMessage在不同域的iframe之間發送消息（例如幀的高度）： https : //developer.mozilla.org/en/DOM/window.postMessage

Answer 2

跨域通信非常有限，並且取決於遠程主機上的通信是不可能的。 http://www.ibm.com/developerworks/library/wa-aj-jsonp1/您可以使用JSONP嘗試從遠程站點檢索信息，但是它非常嘗試並且不適合初學者。

我發現對我有用的解決方法是，我改用服務器端語言來包含遠程文件。 所以代替<iframe>

我做了一個PHP服務器端包括：

<?php include 'http://www.example.com/file.txt?foo=1&bar=2'; ?>

當然，這僅在使用PHP時適用。 一旦以這種方式包含它，便可以操縱DOM元素。

Answer 3

我為此找到的唯一解決方案是通過url傳遞iframe高度。 您可以在這里找到我的測試：

該解決方案適用於跨瀏覽器（chrome，ff，即所有版本，移動設備等）和跨域。

您必須有權訪問iframe代碼本身和iframe主機。 您可以在需要時（即使內容發生更改）刷新iframe高度，只需在iframe中調用publishHeight（）函數即可。

這應該可以在不使用jquery的情況下工作（通常是用純JavaScript編寫的...）。 唯一不方便的是您將在URL中設置高度，例如：

http://www.yourdomain.com/index.html#1458px

但是，您應該輕松地將其刪除或將其更改為不太難看的內容。

編輯：看來，Disqus和Twitter使用此庫來做到這一點： http : //easyxdm.net/wp/

編輯2：在您的頁面上，您將代碼放在第一個jsfiddle頁面上。 在您的iframe中，放置iframe的代碼（右下角的紅色div“ myiframe”）。 希望一切都清楚...但是，請查看下面的鏈接，它是一種更好，更輕松的解決方案。