JQuery的IFrame加載事件發射太快

Question

我試圖找到解決這個問題的努力，但無濟於事。基本上，我嘗試使用JQuery來創建一個新的對話框，當頁面上的按鈕被點擊。對話框的內容包含一個引用外部（跨域）內容的IFrame。在對話框中，我還想要一個「後退」鏈接（稍後將更改爲按鈕），其行爲類似於瀏覽器後退按鈕。當然，我可以讓用戶使用普通的後退按鈕，但這並不是那麼直觀，因此我只需要在iframe上方的對話框中使用後退按鈕。

使用「歷史」對象的JavaScript相對簡單。但是，我希望能夠在歷史記錄數超過特定水平時禁用/刪除此「返回」鏈接。禁用功能的細節足夠簡單，但是我需要能夠訪問iframe的加載事件以確定內容何時完成加載，以便history.length值對於我的測試的目的是正確的。然而，載入事件似乎被激發得太快，並且載入事件被觸發時歷史值不正確。歷史值在「前進」時顯示爲正確，但在點擊我的impromtu後退按鈕後，歷史值不再正確，因爲載入事件報告的歷史值爲之前的已加載內容的iframe。

這裏是我當前的javascript：

<script language="javascript" type="text/javascript"> 
var baseHistory = 0; 

$(function() { 
    $("body").append('<div id="RedmapDialog" title="Dialog Title"></div>'); 
    $(".RedmapButton").bind('click', function(event) { 
    baseHistory = history.length; 
    var data='<a href = "javascript:history.go(-1)">Back to previous page</a>' 
    data = data + '<iframe width="100%" height="100%" id="RMFrame"></iframe>' 
    $("#RedmapDialog").html(data); 
    $("#RedmapDialog").dialog("option", "title", 'Document: '); 
    $("#RedmapDialog").dialog("open"); 
    $('#RMFrame').load(function() { 
     alert("history.length=" + history.length); 
    }).attr("src", "http://www.google.com/"); 
    }); 

    $("#RedmapDialog").dialog({ 
    closeOnEscape: false,  
    height: 600, 
    width: 800, 
    autoOpen: false,  
    resizable: true, 
    autoResize:true, 
    modal: false   
    }); 
}); 

</script> 

，這裏是調用HTML：

<div class="RedmapButton" style="cursor: pointer; cursor: hand;"> 
    <img src="/gui/images/bullseye.gif" width=26 height=26 alt="Redmap" title="Redmap"> 
</div> 

任何思想的，爲什麼負載事件被這麼快後，我選擇我的返回鏈接稱爲？我知道這裏有一些跨域/相同來源的政策問題，但我對iframe的實際內容不感興趣，只是history.length值。

編輯：更新此帖子以包含ShankarSangoli的建議，用於在實例化後設置我的iframe的src。不過，我仍然遇到原來的問題，即我的「返回」鏈接仍然報告不正確的history.length。這是一個jsfiddle鏈接http://jsfiddle.net/fEgv9/1，說明了我的問題。運行時，單擊「Redmap」圖像以顯示iframe。然後點擊谷歌的任何鏈接，然後點擊我的「返回上一頁」鏈接，請注意，歷史記錄報告不正確。

在此先感謝。

Answer 1

在您的代碼中，當您將標記添加到RedmapDialog並附加了加載事件處理程序之後，您正在設置iframe的源。在它到達這個代碼之前，iframe必須已經被加載。嘗試設置iframe的來源已經設置了iframe的load事件處理程序如下

$(".RedmapButton").bind('click', function(event) { 
    baseHistory = history.length; 
    var data='<a href = "javascript:history.go(-1)">Back to previous page</a>' 
    data = data + '<iframe src="javascript:void(0);" width="100%" height="100%" id="RMFrame"></iframe>' 
    $("#RedmapDialog").html(data); 
    $("#RedmapDialog").dialog("option", "title", 'Document: '); 
    $("#RedmapDialog").dialog("open"); 
    $('#RMFrame').load(function() { 
     alert("history.length=" + history.length); 
    }).attr("src", "http://www.google.com/"); 
    }); 

Answer 2

你可以嘗試使用jquery創建iframe，然後將ready（not load）事件附加到創建的框架，分配src屬性並最終將元素附加到div。該代碼會去是這樣的：

$("<iframe />").ready(function(){ alert(this.location); }) //Use your function here 
    .attr("src","www.slashdot.com") 
    .appendTo(document.body); //Append to your div 

有關準備和負載的I幀的事情是當創建DOMFrame元素和DOM樹（不管它的內部狀態）附着在負載被觸發，而準備不會等待iframe的內部狀態。