JQuery IFrame Load event firing too soon

I have tried in vain to find a solution for this issue, but to no avail. Basically I am trying use JQuery to create a new dialog when a button on the page is clicked. The content of the dialog contains an IFrame referencing external (cross-domain) content. Inside the dialog I also want a "back" link (will change to a button later on) that acts similar to the browsers back button. Granted I could just get the user to use the normal back button, but this isn't really all that intuitive hence I want the back button simply inside the dialog itself above the iframe.

The javascript for this is relatively simple using the "history" object. However, I want the ability to disable / remove this "back" link when the history count exceeds a certain level. The details of the disabling functionality are trivial enough, however I need to be able to access the load event of the iframe to determine when the content has finished loading so that the history.length value will be correct for the purposes of my test. However the load event seems to be fired too soon and the history value is not correct at the time the load event is fired. The history value appears to be correct when going "forwards" but after clicking my impromtu back button, the history value is no longer correct as it appears the load event is reporting a history value prior to the iframe having loaded the content.

Here is my current 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("开发者_Go百科src", "http://www.google.com/");
  });

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

</script>

and here is the calling html:

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

Any thought's as to why the load event is being called so soon after I select my back link? I understand that there are some cross-domain / same origin policy issues at play here, however I am not interested in the actual content of the iframe, simply the history.length value only.

Edit: Updated this post to include a suggestion by ShankarSangoli for setting the src of my iframe after its instantiation. However, I am still encountering the original issue whereby my "back" link still reports an incorrect history.length. Here is a jsfiddle link http://jsfiddle.net/fEgv9/1 that illustrates my issue. When run, click the "Redmap" image to display the iframe. Then click any link from google, and then hit my "Back to previous page" link, note that the history is not reporting correctly.

Thanks in advance.

In your code you are setting the source of the iframe when you added markup to RedmapDialog and after that load event handler is attached. Before it reaches this code the iframe must have already been loaded. Try to set the source of the iframe after you have set the iframe load event handler as below

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

You can try creating the iframe with jquery, then attaching the ready (not load) event to the created frame, assigning the src attribute and finally appending the element to your div. The code would go something like this:

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

The thing about ready and load on iframes is that load is triggered when the DOMFrame element is created and attached to the DOM tree (regardless of it's internal state), while ready does wait for the internal state of the iframe.