JQuery IFrame Load 事件触发太快

Question

我曾徒劳地尝试找到解决此问题的方法，但无济于事。基本上，当单击页面上的按钮时，我正在尝试使用 JQuery 创建一个新对话框。对话框的内容包含一个引用外部（跨域）内容的 IFrame。在对话框中，我还想要一个类似于浏览器后退按钮的“后退”链接（稍后将更改为按钮）。当然，我可以让用户使用普通的后退按钮，但这并不是那么直观，因此我希望后退按钮只是在 iframe 上方的对话框本身内。

使用“历史”对象的 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。但是，我仍然遇到原始问题，即我的“返回”链接仍然报告不正确的 history.length。这是一个 jsfiddle 链接http://jsfiddle.net/fEgv9/1，它说明了我的问题。运行时，单击“Redmap”图像以显示 iframe。然后点击任何来自谷歌的链接，然后点击我的“返回上一页”链接，注意历史记录没有正确报告。

提前致谢。

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

Answer 2

您可以尝试使用 jquery 创建 iframe，然后将就绪（未加载）事件附加到创建的框架，分配 src 属性，最后将元素附加到您的 div。代码会是这样的：

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

关于 iframe 上的 ready 和 load 的事情是，当 DOMFrame 元素被创建并附加到 DOM 树（不管它的内部状态如何）时触发加载，而 ready 确实等待 iframe 的内部状态。