How to determine if iframe loading is complete

How to determine if iframe loading is complete: Code example

In web development, when external pages or other web pages need to be loaded, the iframe tag is often used. However, sometimes we need to perform some operations after the iframe is loaded, such as obtaining the content in the iframe or executing some JavaScript code. Therefore, judging that the iframe is loaded is a very important task.

Below I will share several methods to determine if the iframe is loaded and provide specific code examples.

1. Use the onload event of iframe
   The iframe tag provides an onload event, which will be triggered when the content in the iframe is loaded. We can determine whether the iframe is loaded by embedding a hidden iframe in the page and listening to its onload event.

HTML code:

<iframe id="myIframe" src="external.html" style="display:none;"></iframe>

JavaScript code:

var iframe = document.getElementById("myIframe");
iframe.onload = function() {
  // iframe加载完成后执行的操作
  console.log("iframe加载完成");
};

2. Using the contentWindow attribute of iframe
   Through the contentWindow attribute of iframe, we can get The window object of the embedded page. Using this object, we can determine whether the document in the iframe has been loaded.

HTML code:

<iframe id="myIframe" src="external.html"></iframe>

JavaScript code:

var iframe = document.getElementById("myIframe");
var iframeWindow = iframe.contentWindow;

var checkIframeLoaded = function() {
  if (iframe && iframe.contentDocument.readyState === 'complete') {
    // iframe加载完成后执行的操作
    console.log("iframe加载完成");
  } else {
    // 等待iframe加载完成
    setTimeout(checkIframeLoaded, 100);
  }
};

checkIframeLoaded();

3. Use jQuery’s ready method
   If the jQuery library is used in the project, you can use It provides the ready method to determine if the iframe is loaded.

HTML code:

<iframe id="myIframe" src="external.html"></iframe>

JavaScript code:

$(document).ready(function() {
  $('#myIframe').on('load', function() {
    // iframe加载完成后执行的操作
    console.log('iframe加载完成');
  });
});

The above are several methods and code examples for judging that iframe loading is complete. Select the appropriate method according to the actual situation to monitor and process the iframe loading completion event. I hope this article will be helpful to you when judging whether the iframe is loaded!

The above is the detailed content of How to determine if iframe loading is complete. For more information, please follow other related articles on the PHP Chinese website!