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

31.01.2020

17151

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

Обновление Iframe

Метод 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:
var items = document.getElementsByClassName('FrameClass');
for (el of items){
	el.contentWindow.location.reload(true);
}

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

Обновить все 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);
});

Другой вариант – обновить атрибут 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:
var items = document.getElementsByClassName('FrameClass');
for (el of items){
	el.src = el.src;
}

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

Все 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'));
});

Пример обновления 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

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

window.location.reload();

Если на страницы два 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