Question

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

使用“历史”对象，javascript相对简单。但是，我希望能够在历史记录计数超过某个级别时禁用/删除此“后退”链接。禁用功能的细节是微不足道的，但是我需要能够访问iframe的load事件以确定内容何时完成加载，以便history.length值对于我的测试目的是正确的。但是，load事件似乎过早触发，并且在load事件触发时历史值不正确。当进入“前进”时，历史值似乎是正确的但是在点击我的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>

在选择我的反向链接后，为什么这么快就调用了load事件？我知道这里有一些跨域/同源策略问题，但是我对iframe的实际内容不感兴趣，只是对history.length值感兴趣。

编辑：更新了这篇文章，以包含ShankarSangoli的建议，用于在实例化后设置我的iframe的src。但是，我仍然遇到原始问题，即我的“后退”链接仍然报告错误的history.length。这是一个jsfiddle链接http://jsfiddle.net/fEgv9/1，说明了我的问题。运行时，单击“Redmap”图像以显示iframe。然后点击谷歌的任何链接，然后点击我的“返回上一页”链接，请注意历史记录没有正确报告。

提前致谢。

Answer 1

在您的代码中，当您将标记添加到iframe并且在附加了加载事件处理程序之后，您将设置RedmapDialog的来源。在它到达此代码之前，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，然后将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

关于iframe上的就绪和加载的事情是，在创建DOMFrame元素并将其附加到DOM树时触发加载（无论其内部状态如何），而ready则等待iframe的内部状态。

JQuery IFrame加载事件太快了

2 个答案: