How to refresh an IFrame using Javascript?

There are several common methods to refresh an iframe in JavaScript. The choice depends on the specific scenario and requirements, and the following are common approaches:

1. Directly Setting the src Attribute

You can achieve a refresh effect by setting the src attribute of the iframe to its current value. For example:

javascript
function refreshIframe() {
    var iframe = document.getElementById('myIframe');
    iframe.src = iframe.src;
}

This method is straightforward and applicable to most scenarios; simply reassign the src attribute.

2. Using location.reload()

If you want a refresh effect closer to the browser's refresh button, you can use the contentWindow.location.reload() method, which reloads the page inside the iframe:

javascript
function refreshIframe() {
    var iframe = document.getElementById('myIframe');
    iframe.contentWindow.location.reload();
}

This method is similar to the browser's refresh button, reloading all resources, including re-executing JavaScript code on the page.

3. Changing URL Parameters

Sometimes, to ensure the page does not use cached data, you can refresh the iframe by modifying URL parameters. For example, adding a timestamp:

javascript
function refreshIframe() {
    var iframe = document.getElementById('myIframe');
    var currentSrc = iframe.src;
    var timestamp = new Date().getTime();
    var separator = (currentSrc.indexOf('?') !== -1) ? "&" : "?";
    iframe.src = currentSrc + separator + "t=" + timestamp;
}

This method forces the browser to load new content by changing the URL and is particularly suitable for scenarios sensitive to caching.

4. Using window.location.replace()

If you do not want to leave a record in the browser's history, you can use the replace method:

javascript
function refreshIframe() {
    var iframe = document.getElementById('myIframe');
    iframe.contentWindow.location.replace(iframe.src);
}

This method is similar to directly setting the src attribute but does not generate a new entry in the browser's history.

Use Case Example

Suppose you are in a backend management system where an iframe is used to display user operation logs. After certain operations, users want to see the latest log updates immediately. In this case, you can call the refreshIframe() function within the callback of the relevant operation to ensure users always see the latest information.

In summary, the choice of method depends on specific requirements, but these fundamental approaches cover most common scenarios.