JQuery IFrame Load 事件触发得太快

Question

我曾尝试寻找解决此问题的方法，但没有成功。基本上，当单击页面上的按钮时，我尝试使用 JQuery 创建一个新对话框。对话框的内容包含引用外部(跨域)内容的 IFrame。在对话框内，我还想要一个“后退”链接(稍后将更改为按钮)，其作用类似于浏览器后退按钮。当然，我可以让用户使用普通的后退按钮，但这并不是那么直观，因此我希望后退按钮位于 iframe 上方的对话框内部。

使用“history”对象的 JavaScript 相对简单。但是，我希望能够在历史记录计数超过一定级别时禁用/删除此“后退”链接。禁用功能的细节很简单，但是我需要能够访问 iframe 的加载事件来确定内容何时完成加载，以便history.length 值对于我的测试目的来说是正确的。但是，加载事件似乎触发得太早，并且加载事件触发时的历史值不正确。 “前进”时历史值似乎是正确的，但在单击我的临时后退按钮后，历史值不再正确，因为看起来加载事件正在报告 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 的建议。但是，我仍然遇到最初的问题，即我的“后退”链接仍然报告不正确的历史记录长度。这是一个jsfiddle链接http://jsfiddle.net/fEgv9/1这说明了我的问题。运行时，单击“Redmap”图像以显示 iframe。然后单击来自 google 的任何链接，然后单击我的“返回上一页”链接，请注意，历史记录未正确报告。

提前致谢。

Answer 1

在您的代码中，当您将标记添加到 RedmapDialog 并附加加载事件处理程序之后，您将设置 iframe 的源。在到达此代码之前，iframe 必须已加载。设置 iframe 加载事件处理程序后，尝试设置 iframe 的源，如下所示

$(".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/");
  });