HTML - Remove iframe Display

问题

I created an HTML page (main page) with an iframe so when I click the button the iframe will display covering the whole page. But I am having a problem on how to remove it whenever I click the back button from the iframe to the main page.

Here is my code:

function displayIframe() {
  document.getElementById("iframeDisplay").innerHTML = "<iframe src=\"./iframe/iframe.html\" height=\"100%\" width=\"100%\" ></iframe>";
}

<div id="iframeDisplay"> </div>
<button onclick="displayIframe()">Display Iframe</button>

Can you help me on how can I achieve closing the iframe via javascript or jquery

回答1:

You could wrap the iframe in a div and add the back button and the iframe in that div.

Add the click listener to the back button and remove the Iframe on button click.

Example:

function back() {
    document.getElementById("iframe").remove();
}

.back-button {
            position: absolute;
            right: 2px;
        }

<div style="width: 100%; height: 100%">
    <button class="back-button" onclick="back()">Back</button>
    <iframe id="iframe" src="http://google.com" height="100%" width="100%">
    
    </iframe>
</div>

回答2:

Since the source of your frame is on the same domain (even site) as the containing page, you should be able to reach from frame's code into the parent.

window.parent.document.querySelector('iframe').style.display = 'none';

来源：https://stackoverflow.com/questions/60841904/html-remove-iframe-display