Как обновить iframe

Перезагрузить iframe на странице можно с помощью JS или jQuery следующими методами:

Метод contentWindow.location.reload(true) будет работать только если в iframe загружена страница из своего домена, иначе будет ошибка:

Uncaught DOMException: Blocked a frame with origin ... from accessing a cross-origin frame.

Обновить по id:

// JS:
document.getElementById('FrameID').contentWindow.location.reload(true);

// jQuery:
$('#FrameID')[0].contentWindow.location.reload(true);
JS

Обновить по классу:

// JS:
var items = document.getElementsByClassName('FrameClass');
for (el of items){
	el.contentWindow.location.reload(true);
}

// jQuery:
$('.FrameClass').each(function() {
	this.contentWindow.location.reload(true);
});
JS

Обновить все iframe на странице:

// JS:
var items = document.getElementsByTagName('iframe');
for (el of items){
	el.contentWindow.location.reload(true);
}

// jQuery:
$('iframe').each(function() {
	this.contentWindow.location.reload(true);
});
JS

Другой вариант – обновить атрибут src, при этом iframe автоматически перезагрузится, данный приём работает с чужими доменами.

Обновить по id:

// JS:
var iframe = document.getElementById('FrameID');
iframe.src = iframe.src;

// jQuery:
var iframe = $('#FrameID')[0];
$(iframe).attr('src', $(iframe).attr('src'));
JS

Обновить по классу:

// JS:
var items = document.getElementsByClassName('FrameClass');
for (el of items){
	el.src = el.src;
}

// jQuery:
$('.FrameClass').each(function() {
	$(this).attr('src', $(this).attr('src'));
});
JS

Все iframe на странице:

// JS:
var items = document.getElementsByTagName('iframe');
for (el of items){
	el.src = el.src;
}

// jQuery:
$('iframe').each(function() {
	$(this).attr('src', $(this).attr('src'));
});
JS

Пример обновления iframe c чужим доменном

<iframe id="FrameID" src="https://example.com/"></iframe>
<button onclick="update_iframe(); return false;">Обновить iframe</button>

<script>
function update_iframe(){
	var iframe = document.getElementById('FrameID');
	iframe.src = iframe.src;
}
</script>
HTML

Если нужно обновить iframe из самого себя, достаточно вызвать метод location.reload():

window.location.reload();
JS

Если на страницы два iframe и нужно из первого обновить второй. В таком случаи обращение к элементу осуществляется через родителя window.parent.

Родительская страница index.html

<iframe id="frame-1" src="/frame-1.html"></iframe>
<iframe id="frame-2" src="/frame-2.html"></iframe>
HTML

Код первого iframe:

<button onclick="update_iframe(); return false;">Обновить второй iframe</button>

<script>
function update_iframe(){
	window.parent.document.getElementById('frame-2').contentWindow.location.reload(true);
}
</script>
HTML

Код второго iframe:

<button onclick="update_iframe(); return false;">Обновить первый iframe</button>

<script>
function update_iframe(){
	window.parent.document.getElementById('frame-1').contentWindow.location.reload(true);
}
</script>
HTML

Пример:

31.01.2020, обновлено 11.09.2022
11713

Комментарии

, чтобы добавить комментарий.

Другие публикации

Размеры Iframe
Если у указать width 100%, то он растянется на всю ширину родителя, но height 100% так не работает.
18220
+1
Модальные окна на Fancybox 2
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
16546
+5
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
53814
+4
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
7226
+4
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
9801
+5
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
14057
+4