Question

我正在将任意页面加载到元素中。但是，我想在我确定页面已加载之后才调用方法。有没有办法检测到这样的事件？

<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>

Answer 1

要实现此目的，您必须模拟使用click事件触发的函数的回调。为此，为回调创建一个函数，并为click事件创建函数：

<强>回调

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

点击功能

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

    callback();        
}

只需在jQuery的ready语句中调用它。检查this fiddle是否有结果。

Answer 2

您可以创建一个小助手功能来处理这个问题。我已经使用JQuery事件＆＃34;加载＆＃34;

进行了测试

参考文献：

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();
    });
  });

Answer 3

尝试

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

另见

Detect when an iframe is loaded

difference between iframe, embed and object elements

＆＃13;

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

＆＃13;

<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" />

＆＃13;

如何在将页面加载到<object>元素</object>时触发事件

3 个答案: