How to clear the content of an IFRAME?

In web development, dynamically clearing the content of an <iframe> is often necessary. This can typically be achieved through several different methods:

Method One: Modify the src Attribute

The most straightforward approach is to set the src attribute of the <iframe> to an empty string "" or to a blank URL such as "about:blank", which ensures the <iframe> is reloaded as a blank page.

javascript
function clearIframe() {
    var iframe = document.getElementById('myIframe');
    iframe.src = "about:blank";
}

Method Two: Use JavaScript to Directly Manipulate the DOM

For more precise control over the <iframe>'s content, directly manipulate the DOM using JavaScript. Access the contentDocument or contentWindow.document to clear the internal HTML.

javascript
function clearIframeContent() {
    var iframe = document.getElementById('myIframe');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.body.innerHTML = ""; // Set the iframe's body content to empty
}

This method allows precise control down to specific elements within the <iframe>, enabling detailed clearing operations.

Example: Dynamically Clearing and Resetting Content

Suppose an <iframe> displays user action results, requiring previous results to be cleared after each operation.

HTML structure:

html
<iframe id="resultFrame" src="about:blank"></iframe>
<button onclick="clearAndReset()">Clear and Reset</button>

JavaScript code:

javascript
function clearAndReset() {
    var iframe = document.getElementById('resultFrame');
    iframe.src = "about:blank"; // First clear the iframe content
    setTimeout(function() {
        iframe.src = "resultPage.html"; // Re-set src to load new content
    }, 500); // Delay to ensure full clearing before reloading
}

This example demonstrates clearing the <iframe> content first, then loading new content after a delay to ensure users always see fresh results.

These methods can be selected and adjusted based on specific project requirements and needs.