2012-05-24 45 views
1

我發現並正在使用以下計算器問題和答案here。我在一個iFrame裏面使用iFrame來引用父域,以便將我的高度傳回給它。我完全理解這個概念,並且很容易實現。問題是,當我嘗試從jQuery獲取$(document).height()或僅通過document.body.scrollHeight時,當我的頁面被引用到iFrame中時,在所有瀏覽器中都看到了奇怪的結果。獲取跨域iFrame中的文檔的高度

以下是我的網頁上發生的一些背景。我做了一些Ajax調用來搜索第三方提供商的服務,並根據結果生成html內部的標準內容。順便說一句,我在等待我的html被添加到DOM之前抓住文檔的高度。以下是$(document).height()當我的頁面位於iFrame內時的結果。

FireFox 10.0.2其中拾取的高度幾乎比文檔的實際高度小1000或更多。

谷歌瀏覽器18.0.1025.162大多數時間會選擇正確的高度。有時高度只有幾百像素。

Safari 5的行爲就像FireFox一樣。

我見過許多博客文章,其代碼顯示了行爲。無論我使用jQuery還是使用JavaScript文檔對象提供的內容都無所謂。我從來沒有看到任何一次調用的結果不一致。我不得不相信其他使用過這種技術的人也會遇到這種情況。

我不需要顯示我的iFrame調整大小或輔助iFrame的代碼,因爲這些功能按預期運行。主要的代碼我想表明的是我如何開始從我的搜索形式大小調整過程中的AJAX事件和DOM操作完成後:

function resizeMe() { 
    var iFrameHelper = $("#iFrameHelper"); 
    iFrameHelper.attr("src", iFrameHelper.attr("data-url") + "?height=" + $(document).height() + "&cacheb=" + Math.random()); 
} 

回答

0

所以我最終搞清楚什麼問題了。 $(document).height()部分工作正常。問題全在於時機。我在ajax調用完成之後在頁面中呈現的項目包含導致請求從頁面出去以獲取圖像的圖像。在圖像上沒有默認的高度設置,因此在我更改頁面內部的iFrame上的src屬性之前,高度並沒有被正確計算。

我最終做的只是默認所有圖像的高度,因爲它們具有相同的尺寸。我責備iFrame而不是我自己。爲了這樣一個簡單的原因拉出我的頭髮2天。

我希望這可以幫助別人在未來。