How to display loading message when an iFrame is loading?

When embedding an iFrame in a webpage, since the content may take some time to load, to improve user experience, we typically display a loading message or animation before the iFrame content is fully loaded. Here is a common method to achieve this:

Method: Using JavaScript and CSS

Step 1: HTML Structure

In HTML, we first add the iFrame and a loading indicator (such as a loading animation or simple text message):

html
<div id="iframe-container">
    <iframe id="my-iframe" src="https://example.com" style="display:none;" onload="iframeLoaded()" frameborder="0"></iframe>
    <div id="loading-message">Loading...</div>
</div>

Step 2: CSS Styles

We can add some basic CSS to enhance the loading message and ensure the iFrame is initially hidden, showing only the loading message:

css
#iframe-container {
    position: relative;
    width: 100%; /* or specific width */
    height: 400px; /* or specific height */
}

#loading-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #333;
}

Step 3: JavaScript Handling

Once the iFrame content is fully loaded, we can use JavaScript to hide the loading message and display the iFrame:

javascript
function iframeLoaded() {
    document.getElementById('loading-message').style.display = 'none';
    document.getElementById('my-iframe').style.display = 'block';
}

Practical Application Example

Suppose we need to load a third-party report page in a project, which contains substantial content and loads slowly. By using the above method, we can provide users with a clear prompt during the report page loading process: "Loading, please wait...", ensuring users recognize the page is still loading normally and won't mistakenly perceive an issue. Once the content is fully loaded, the loading message disappears, and the iFrame content is displayed, allowing users to view the complete report page.

Conclusion

This method is simple, easy to understand, and easy to implement, significantly enhancing the user experience of web pages. In actual development, you can adjust the styles of the iFrame and loading message according to your needs to better align with the overall design style of the website.