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

【问题标题】：How to fire an event when a page is loaded into an <object> element如何在页面加载到 <object> 元素时触发事件
【发布时间】：2015-04-14 18:30:46
【问题描述】：

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

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

【问题讨论】：

通常ready函数就是这个..当一切都加载完毕
Is there a cross-browser standard on-load event for HTML's "object" tag? 的可能重复项

标签： javascript jquery

【解决方案1】：

试试

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

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

【讨论】：

【解决方案2】：

你可以创建一个小辅助函数来处理这个问题。我已经使用 JQuery 事件“加载”进行了测试

参考文献：

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

【讨论】：

【解决方案3】：

要实现这一点，您必须模拟由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 获取结果。

【讨论】：

这似乎等同于在