JavaScript - 使用URL片段動態調整iframe跨域的尺寸

我找到了technique that documents cross-domain communication with iframes，我決定嘗試利用它來實現獲取iframe以在內容更改時自動調整大小的崇高目標。JavaScript - 使用URL片段動態調整iframe跨域的尺寸

基本上，這是我的計劃（我知道這有點哈克）。

我有過兩個父頁和子頁面的控制，但他們會在不同的域（並且，事實上，一個將是http和其他HTTPS）被加載。
在iframe中，我有一個函數在文檔加載時運行，然後定期獲取文檔的高度，並將其設置爲URL片段的值（即類似https://blahblah.com/#h-768 ）
在父窗口中，我有一個函數，它將定期檢查iframe的URL，獲取哈希標記，解析出高度，並相應地更改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
創建，做父頁面上的新<腳本>元素調整大小輪詢，然後
是否window.location = "http://my-real-app-location.com"

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

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

來源

2011-04-18 Ryan

你要運行這個JS父窗口上一個不錯的跨域解決方案？或者在實際的iframe中？ – wesbos 2011-04-18 04:53:59

JavaScript正在父頁面的範圍內運行，對不對？ – James 2011-04-18 05:12:36

那麼，目標是在iframe中運行JavaScript代碼片段，以便在父頁面上，我可以動態地創建一個函數（使用parent.document.write或類似的東西），引用window.frames [「myframe」] – Ryan 2011-04-18 05:18:17

那麼，以下是我最初尋找的代碼。這將給<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屬性。

來源

2011-04-19 04:25:17 Ryan