Как удалить iframe javascript

Как очистить содержимое IFRAME?

Как очистить содержимое моего элемента IFRAME, используя JavaScript, не загружая в него пустую страницу?

Я могу решить сделать это: iframe_element.src = «blank.html» , но должен быть лучший, мгновенный метод.

10 ответов

Является пустым URL-адресом Это всегда понятно

Вы можете установить источник страницы, и он будет очищен.

$ ( » # IFrame » ) содержание ( ) найти ( » тело » ) HTML ( ») . . . ;

function getContentFromIframe(iFrameName) < var myIFrame = document.getElementById(iFrameName); var content = myIFrame.contentWindow.document.body.innerHTML; //Do whatever you need with the content >

Просто возьмите Iframe и удалите элемент document из него. Iframe будет пустым

 var frame = document.getElementById("YourFrameId"), frameDoc = frame.contentDocument || frame.contentWindow.document; frameDoc.removeChild(frameDoc.documentElement); 

// Сначала я получаю окно по его идентификатору.

var my_content = document.getElementById('my_iframe').contentWindow.document; 

// Затем я очищаю его, устанавливая тег HTML body в пустую строку.

// Теперь, когда я пишу свой новый контент, он не добавляется в конец тела, и тело iframe будет содержать только свежее содержимое.

my_content.write(new_content); 

Вы также можете сделать это:

У меня были трудности с «about: blank» на страницах со многими IFrames. Похоже, это не правильное местоположение в каждом браузере (хотя я точно не узнал). В любом случае, я доволен javascript:void(0);

Или вы можете сделать это:

var iframe_element = window.frames['iframe_name']; iframe_element.document.open(); iframe_element.document.close(); 

Ваша техника самая надежная. Это тот, который я использую сам. Время от времени контент может доставляться по HTTPS, а использование about: blank может приводить к появлению предупреждающих сообщений с эффектом «Вы хотите включить контент из незащищенного местоположения» или чем-то подобным.

Что-то мгновенное — это вопрос восприятия, однако, если на вашем сайте есть один файл Blank.html, настроенный с длительным сроком действия кэша, клиент будет загружать страницу только один раз (не более одного раза за сеанс).

var iframe = document.getElementById("myiframe"); var html = ""; iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); 

Протестировано в IE, Firefox и Chrome . это было сделано 🙂

Источник

Как удалить iframe внутри себя с помощью JavaScript

Я знаю, что есть несколько подобных вопросов, но я должен снова задать вопрос с прикрепленным кодом из-за невозможности выработать. У меня есть два файла .xhtml в проекте JSF. Один из них — mainPage.xhtml имеет кнопку, которая генерирует динамический html-код для создания iframe (iFramePage.xhtml) и показывает его в браузере;

Я могу сгенерировать iframe, нажав кнопку «cntrBtn1» и удалив, щелкнув «cntrBtn2» внутри mainPage.xhtml. Однако мне нужно удалить iframe внутри себя (iFramePage.xhtml). Когда я нажимаю «exitBtn» в iFramePage.xhtml, iframe не исчезает. Нет ничего о кросс-домене, потому что mainPage.xhtml и iFramePage.xhtml находятся в одном проекте JSF, даже в том же каталоге. Я могу перенаправить родительскую страницу (смотрит на две строки в closeSelf() в iFramePage.xhtml), но я не могу удалить iframe с помощью родительского элемента, почему! Пожалуйста, помогите мне:)

parent не имеет доступа к iframe dom, но к родительскому окну. Возможно, вы можете попробовать parent.document.getElementById(«iframe0»).style.display=’none’ . Или используйте родительское дочернее общение davidwalsh.name/window-iframe

Вместо «parent.document.getElementById (» iframe0 «). Style.display = ‘none'», «parent.document.getElementById (» iFrameContainer «). InnerHTML = »», я думаю, является более правильным действием. Ваш совет вдохновил меня, спасибо. Однако мне не удалось применить window.postMessage, упомянутое в ссылке в вашем сообщении.

Источник

Удалить iframe с помощью javascript

этот код не работает должным образом, если имеется более одного iframe, так как iframe в данном случае представляет собой живую коллекцию, которая обновляется, пока мы удаляем iframe из документа — С.Ермакович

@ s.ermakovich Я не думаю, что это обязательно правильно, но я все равно изменил его на статическую коллекцию. — Мэтт Диамант

document.querySelectorAll('iframe').forEach( function(elem)< elem.parentNode.removeChild(elem); >); 

Вы не упомянули, почему вам нужно удалить фреймы в документе. Я делаю это, чтобы предотвратить атаку Clickjacking. Но это сработает в любом случае. Ты нуждаешься в этом:

Небольшое улучшение здесь, чтобы Мэтта оригинальный пример, если вы хотите делать это только на мобильном телефоне. Для меня вариант использования заключался в том, что я использую вставку Vimeo на своем сайте для создания видеофона. Мне нужно было отказаться от видео на мобильном телефоне для производительности. Это делает работу.

Комментарий s.ermakovich о том, что код не работает должным образом с более чем одним iframe, не является «неправильным», а немного вводит в заблуждение. и зависит от ситуации. В моем Vimeo iFrame был дочерний фрейм, отправляющий запросы, которые продолжались после завершения DOM. Код Мэтта сделал уничтожить обоих.

В моем случае мой 2-й фрейм был прямой ребенок родителя. Код может не работать, если на странице есть несколько фреймов, которые не являются прямыми дочерними элементами одного и того же родителя, и вы просто копируете и вставляете этот код. В этом случае вам нужно быть более конкретным:

Если на вашей странице есть несколько iFrames, вы можете добавить специфичности в свой селектор запросов. Ваш выбор, хотите ли вы использовать querySelectorAll() или нет, зависит от ситуации, но я не вижу причин, по которым также нельзя использовать querySelector().

document.querySelector(".foo > bar iframe") document.querySelector("foo bar > iframe") 

Если у вас есть сетка фреймов, возможно, несколько встроенных видео подряд.

document.querySelectorAll("foo > .bar > iframe") 

или, может быть, лучше из того же источника данных.

document.querySelectorAll("iframe[data-src]") 

Кто-нибудь, поправьте меня, если я где-то ошибаюсь

Источник

Как удалить iframe внутри самого себя с помощью javascript

Я знаю, что есть несколько похожих вопросов, но я вынужден задать вопрос снова с прикрепленным кодом, потому что не могу разобраться. У меня есть два .xhtml файла в JSF проекте. Один — mainPage.xhtml имеет кнопку, которая генерирует динамический html код для создания iframe (iFramePage.xhtml) и отображения его в браузере;

Другая страница — iFramePage.xhtml содержит некоторый html и javascript код;

Я могу создать iframe, нажав кнопку «cntrBtn1» и удалить, нажав «cntrBtn2» внутри mainPage.xhtml. Однако мне нужно удалить iframe внутри него самого (iFramePage.xhtml). Когда я нажимаю «exitBtn» в iFramePage.xhtml, iframe не исчезает. О кросс-доменности речи не идет, так как mainPage.xhtml и iFramePage.xhtml находятся в одном проекте JSF, даже в одной директории. Я могу перенаправить родительскую страницу (смотрит на две строки в closeSelf() в iFramePage.xhtml), но я не могу удалить iframe с помощью элемента parent, почему! Пожалуйста, помогите мне 🙂

Источник

Как удалить iframe из кода JS внутри фрейма

IFrame — это инструмент, который позволяет разработчикам встраивать веб-страницы или содержимое других веб-сайтов в свой собственный сайт. Однако иногда может возникнуть необходимость удалить или скрыть iframe из кода JavaScript внутри фрейма. В этой статье мы рассмотрим несколько способов выполнить эту задачу.

1. Использование свойства parent:
Один из самых простых способов удалить iframe из кода JavaScript внутри фрейма — использовать свойство parent. Parent представляет собой ссылку на родительский документ, в котором встраивается фрейм. Чтобы удалить iframe, можно вызвать метод removeChild() для элемента iframe и передать ссылку на него в качестве параметра.

var iframe = parent.document.getElementById(‘iframeId’); if (iframe)

2. Использование метода postMessage():
Второй способ удалить iframe из кода JavaScript внутри фрейма — использовать метод postMessage(). PostMessage позволяет отправлять сообщения между двумя окнами с разных источников. Мы можем отправить сообщение из фрейма в родительское окно и в родительском окне удалить iframe.

var message = < action: 'removeIframe' >; window.parent.postMessage(message, '*');

window.addEventListener('message', function (event) < if (event.data.action === 'removeIframe') < var iframe = document.getElementById('iframeId'); if (iframe) < document.body.removeChild(iframe); >> >);

3. Использование CSS для скрытия iframe:
Если удаление iframe не является необходимостью, а вместо этого требуется скрыть его, можно использовать CSS для достижения этой цели. Вы можете применить свойство display: none; к элементу iframe или установить его высоту и ширину равными 0.

4. Использование фрейма с классом или идентификатором:
Если вы встраиваете фрейм на своем веб-сайте с помощью класса или идентификатора, вы можете использовать JavaScript для поиска и удаления фрейма.

var iframes = parent.document.getElementsByClassName(‘iframeClass’);
for (var i = 0; i

Источник