How to determine if iframe loading is complete

WBOY
Release: 2024-02-22 11:33:03
Original
913 people have browsed it

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>
Copy after login

JavaScript code:

var iframe = document.getElementById("myIframe");
iframe.onload = function() {
  // iframe加载完成后执行的操作
  console.log("iframe加载完成");
};
Copy after login
  1. 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>
Copy after login
Copy after login

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();
Copy after login
  1. 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>
Copy after login
Copy after login

JavaScript code:

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template