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

Question

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>

Answer 1

To achieve this you have to simulate a callback on the function triggered with the click event. 要实现此目的，您必须模拟使用click事件触发的函数的回调。 For this make a function for the callback and a function for the click event: 为此，为回调和click事件的函数创建一个函数：

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. 只是在jQuery的ready语句中调用它。 Check this fiddle for the results. 检查这个小提琴的结果。

Answer 2

You could create a little helper function that will take care of this. 您可以创建一个小助手功能来处理这个问题。 I've tested using the JQuery event "load" 我已经测试过使用JQuery事件“加载”

References: 参考文献：

HTML HTML

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

JavaScript 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

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 检测何时加载iframe

difference between iframe, embed and object elements iframe，embed和object元素之间的区别

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

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

问题描述

3 个解决方案

解决方案1
0 2015-02-13 17:44:29

解决方案2
0 2015-02-13 19:27:55

解决方案3
0 2015-02-13 23:27:12

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

问题描述

3 个解决方案

解决方案1 0 2015-02-13 17:44:29

解决方案2 0 2015-02-13 19:27:55

解决方案3 0 2015-02-13 23:27:12

解决方案1
0 2015-02-13 17:44:29

解决方案2
0 2015-02-13 19:27:55

解决方案3
0 2015-02-13 23:27:12