JavaScript-使用URL片段動態調整iframe跨域的大小

Question

我發現了一種記錄與iframe進行跨域通信的技術 ，因此我決定嘗試利用這一技術來實現宏偉的目標，即在內容更改時自動調整iframe的大小。

基本上，這是我的計划（我知道這有點hacky）。

• 我可以控制父頁面和子頁面，但是它們將被加載到不同的域中（實際上，一個將是http，另一個將是https）。

• 在iframe中，我有一個函數，該函數將在文檔加載時運行，然后定期運行，以獲取文檔的高度，並將其設置為URL片段的值（即類似https：// blahblah的值）。 com /＃h-768 ）

• 在父窗口中，我有一個函數，該函數將定期檢查iframe的網址，獲取哈希標簽，解析高度，並相應地更改iframe的高度。

最大的收獲是： iframe沒有與之關聯的ID或名稱，我可能無法更改。

實際上，iframe 最初將位於同一域中。 它將使用document.write在父窗口中創建iframe-polling函數（因為我之前說過我對父頁面有控制權時實際上在撒謊），然后它將導航到我實際所在的頁面有興趣。

因此，真正的問題是， iframe如何為自己賦予名稱或ID ？

我一直在嘗試這樣的事情（使用jQuery）：

$(document).ready(function() {
        // Try changing the name            
        $(self).attr("name", "myframe");
        $(self).attr("id", "myframe");      
});

麻煩的是，它似乎沒有用。

有什么想法嗎？

澄清說明

父頁面將類似於http://mysite.com ，而iframe 最初將是http://mysite.com/iframe 。

該初始iframe頁面只是一個虛擬頁面，即：

• 為父頁面上的<iframe>元素提供ID
• 在父頁面上創建一個新的<script>元素，以進行大小調整輪詢，然后
• window.location = "http://my-real-app-location.com"

新頁面將使用當前高度更新URL片段，從而使iframe的URL類似於http://my-real-app-location.com/#h-800 （表示文檔高800像素）。

虛擬頁面在父頁面上創建的腳本需要獲取該URL片段並相應地更改iframe高度。

Answer 1

好吧，父頁面最終將控制iframe的URL。 iframe只能更新其網址，而不能更新其他任何內容。

話雖如此，我不確定我是否理解問題。 創建iframe時為什么不給它一個ID？

Answer 2

iframe的窗口/文檔無法在其自己的容器標簽上設置屬性，因為該標簽歸父文檔所有。 標簽本身與里面的窗口和文檔無關。

如果需要id屬性，則必須從父文檔中進行設置，並且無法解決。

Answer 3

好吧，以下是我最初尋找的代碼。 這將為<iframe>元素提供ID屬性，並且此代碼在iframe的范圍內運行。 當然，僅當iframe與父頁面位於同一域（在我的情況下，它最初位於）上時，它才起作用。

var foundMyself = false;
$("iframe", parent.document).each(function() {
    if (this.contentWindow == self) {
        $(this).attr("id", "myframe");  
            foundMyself = true; 
    }
});

以下是我用於在父頁面上創建適當的腳本標記的代碼（請記住，我的應用程序設置了一個片段＃h-xxxxx來表示頁面的高度）：

if (foundMyself) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "function resizeApp() { var app = document.getElementById(\"myframe\"); var hash = app.contentWindow.location.hash; app.style.height = hash.substring(3); } setInterval('resizeApp();', 500);";

    parent.document.body.appendChild(script);
}

window.location = "https://my-app-real-location.com"

我現在遇到的新問題是，一旦iframe移開，就不允許我訪問contentWindow屬性。

Answer 4

如果您要尋找的話，一個不錯的跨域解決方案就在這里-一篇完整的研究文章

另一個跨域iframe調整大小問答