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的内部状态。