3

I am loading an arbitrary page into an element. However, I want to call a method only AFTER I'm sure that page has loaded. Is there a way to detect such an event?

<body>
<div id="testFrame" style="width: 640px; height: 480px; border: solid; border-width: thick;"></div>

<input id="reload" type="button" value="Refresh"/>
<script>

$(document).ready(function(){
  $('#reload').click(function(e){
     e.preventDefault();
 $("#testFrame").html('<object id="idObject" width="640" height="480"data="http://www.microsoft.com">');

  });

$( "#idObject" ).isLoaded(function() { // Not a real function
  alert("frame loaded"); // Show a message when the page is loaded
});
});

</script>
</body>
JayDoe
  • 153
  • 1
  • 5
  • normally the ready function is exactly this.. when everything is loaded – Timotheus0106 Feb 13 '15 at 16:40
  • possible duplicate of [Is there a cross-browser standard on-load event for HTML's "object" tag?](http://stackoverflow.com/questions/7756353/is-there-a-cross-browser-standard-on-load-event-for-htmls-object-tag) – CBroe Feb 15 '15 at 13:32

3 Answers3

0

To achieve this you have to simulate a callback on the function triggered with the click event. For this make a function for the callback and a function for the click event:

Callback

function callbackAlert(){
    alert("callback trigered");
}

Click function

function clickFunction(event, callback){
    event.preventDefault();
    $("#testFrame").html('<object id="idObject" width="640" height="480" data="http://www.microsoft.com">');         

    callback();        
}

The just call it inside the ready statement of jQuery. Check this fiddle for the results.

Yerko Palma
  • 12,041
  • 5
  • 33
  • 57
  • This seems to be the equivalent of just executing any statements after the insertion. It does not wait for the inserted page to be fully loaded before executing the following statements. – JayDoe Feb 13 '15 at 20:08
0

You could create a little helper function that will take care of this. I've tested using the JQuery event "load"

References:

HTML

<input id="reload" type="button" value="Refresh"/>
<div id="MyObject"></div>

JavaScript

$(function() {

    /**
     * Helper to for the object element.
     */
    var HtmlObjectLoader = function() {
      var _this = this;
      this._loaded = true;
      this._deferred;

      /**
       * Load the object and HTML data.
       * @returns {JQuery.Deferred} Returns the deferred object.
       */
      this.load = function() {

        // check to see if the content is loaded.
        if(this._loaded === false) {
          // display in the log that the request is still in progress and a new one isn't being resent.
          console.info('..request in progress...');
          return;
        }

        // update the local flag indicating the status
        this._loaded = false;

        this._initialize();

        // **NOTE** you might want to put logic and round this so the "load" event isn't being continually bound.
        var $htmlObject = $('<object id="idObject" width="640" height="480" data="http://www.microsoft.com">')
          .on('load', function() {
            _this._deferred.resolve();
          });

        $('#MyObject').html($htmlObject);

        return this._deferred.promise();
      };

      /**
       * Setup the deferred object that is used to keep track of the request state.
       */
      this._initialize = function() {
        if(!this._deferred) {
          this._deferred = $.Deferred();
          this._deferred.then(function(){
            _this._loaded = true;
          });
        }
      }
    };

    var htmlLoader = new HtmlObjectLoader();

    $('#reload').on('click', function(e){
      htmlLoader.load();
    });
  });
anAgent
  • 2,550
  • 24
  • 34
0

Try

$(document).ready(function() {
  $('#reload').on("click", function(e) {
    e.preventDefault();
    var obj = $("<object />", {
      "id":"idObject",
      "width":"320px",
      "height":"240px"
    }).prop("data", "url")
    .appendTo("#testFrame").trigger("_ready")
  });    

  $("#testFrame").on("_ready", function(e) { 
    console.log(e.target);
    alert("frame loaded"); // Show a message when the page is loaded
  });
});

See also

Detect when an iframe is loaded

difference between iframe, embed and object elements

$(document).ready(function() {
  $('#reload').on("click", function(e) {
    e.preventDefault();
    var obj = $("<object />", {
      "id":"idObject",
      "width":"320px",
      "height":"240px"
    }).prop("data", top.location.href)
    .appendTo("#testFrame").trigger("_ready")
  });


  $("#testFrame").on("_ready", function(e) { // Not a real function
    console.log(e.target.data);
    alert("frame loaded"); // Show a message when the page is loaded
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="testFrame" style="width: 320px; height: 240px; border: solid; border-width: thick;"></div>

<input id="reload" type="button" value="Refresh" />
Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177