HTML - Удалить отображение iframe

Question

Я создал страницу HTML (главная страница) с iframe, поэтому, когда я нажимаю кнопку, будет отображаться iframe, охватывающий всю страницу. Но у меня возникает проблема с тем, как удалить его всякий раз, когда я нажимаю кнопку "Назад" из iframe на главную страницу.

Вот мой код:

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>

Можете ли вы мне помочь, как мне добиться закрытия iframe с помощью javascript или jquery

Answer 1

Поскольку источник вашего фрейма находится в том же домене (даже на сайте), что и содержащая его страница, вы сможете получить доступ от кода фрейма к родительскому.

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

Answer 2

Вы можете заключить iframe в div и добавить кнопку возврата и iframe в этот div.

Добавьте прослушиватель щелчка к кнопке «Назад» и удалите Iframe при нажатии кнопки.

Пример:

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>