HTML5從嵌套的iframe中調整頂級文檔iframe

Question

這個問題似乎很難理解，所以我會盡我所能對它進行說明。

說我有以下的index.html體：

<iframe name="parent"></iframe> 

而且parent iframe中，我加載以下頁面體：

<iframe name="nested-navigation"></iframe> 
<iframe name="nested-parent"></iframe> 

而且裏面nested-parent iframe中，我打開另一個頁面。在這個其他頁面中，我需要以某種方式獲取iframe的頂級（index.html）文檔parent，以便我可以使用iframe內容大小nested-parent調整其內容的高度。

我使用嵌套的頁面主體的加載內容正確調整了index.html的iframes高度的parent的大小。但是，在下一個嵌套中，我無法訪問index.html文檔上下文，因此無法獲取iframe元素。

我需要幫助弄清楚如何到達index.html的iframe的parent。我將如何做到這一點？

頁面在線和效果可以看這裏：

www.ngeneersinc.com

如果單擊Projects導航鏈接，它會正確地加載網頁並調整parent iframe中。遺憾的是，當您點擊此嵌套頁面中的Ngen導航鏈接時，頂級（index.html）iframe（parent）沒有調整大小，並且內容被剪切爲上一頁中設置的高度。

編輯：

從本質上講，我試圖做我的javascript函數如下：

var e = document.getElementById("nested-parent").contentWindow; // which is OK 
var x = e.contentWindow; // which is 'undefined' because I lost the context of the index.html document 

Answer 1

您可以使用下面的jQuery插件來實現：
http://benalman.com/projects/jquery-postmessage-plugin/

然後將以下代碼添加到您包含在iframe文檔和父窗口內的JavaScript文件中：

var iFrames = []; 
var iFrameCounter = 0; 

// Get the parent page URL as it was passed in, for browsers that don't support 
// window.postMessage 
var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')); 

// The first param is serialized using $.param (if not a string) and passed to the 
// parent window. If window.postMessage exists, the param is passed using that, 
// otherwise it is passed in the location hash (that's why parent_url is required). 
// The second param is the targetOrigin. 
function SetHeight() { 
    var id = Number(parent_url.replace(/.*#(\d+)(?:&|$)/, '$1')); 
    $.postMessage({ if_height: $(document).outerHeight(true), id: id }, parent_url, parent); 
}; 

// Adds the iframe for the given url to the given container 
function CreateFrame(container, url) { 
    $(function() { 
     // Pass the parent page URL into the Iframe in a meaningful way 
     var src = url + '#' + encodeURIComponent(document.location.href + "#" + iFrameCounter); 

     // Append the iFrame into the DOM. 
     var html = '<iframe id="iFrame' + iFrameCounter + '" src="' + src + '" width="100%" scrolling="no" frameborder="0">Your browser lacks support for iFrames!<\/iframe>'; 
     iFrames[iFrameCounter] = { id: "iFrame" + iFrameCounter, container: container, if_height: 0 }; 

     // Add iFrame to DOM 
     $(container).append($(html)); 
     iFrameCounter++; 
    }); 
} 

$(function() { 
    // Setup a callback to handle the dispatched MessageEvent event. In cases where 
    // window.postMessage is supported, the passed event will have .data, .origin and 
    // .source properties. Otherwise, this will only have the .data property. 
    $.receiveMessage(function (e) { 

     // Get frameId 
     var id = Number(e.data.replace(/.*id=([\d-]*).*/, '$1')); 

     var frame = iFrames[id]; 

     // Get the height from the passsed data. 
     var h = Number(e.data.replace(/.*if_height=([\d-]*).*/, '$1')); 

     if (!isNaN(h) && h > 0 && h !== frame.if_height) { 
      // Height has changed, update the iframe. 
      $("#" + frame.id).css("height", (frame.if_height = h)); 
      $("#" + frame.id).css("min-height", (frame.if_height = h)); 
      $("#" + frame.id).css("max-height", (frame.if_height = h)); 

      // Also update the parent element of the iframe. 
      $("#" + frame.id).parent().css("height", (frame.if_height = h)); 
      $("#" + frame.id).parent().css("min-height", (frame.if_height = h)); 
      $("#" + frame.id).parent().css("max-height", (frame.if_height = h)); 
     } 
    }); 
}); 

然後使用下面的代碼創建的父窗口的iframe：

<script type="text/javascript"> 
    $(document).ready(function() { 
     CreateFrame("#someiFrameContainer", url); 
    }); 
</script> 
<div id="someiFrameContainer"></div> 

然後每次文檔的高度內的iFrame變化調用此函數從iFrame的頁面：

SetHeight(); 

這將導致iframe頁面發送包含其新的總高度的消息到其父窗口（支持跨域），這將捕獲消息並更新iframe的大小。這要求父窗口還包含上面的腳本文件，因爲此文件註冊事件和函數以便在使用時自動處理這些消息CreateFrame();