Як оновити IFrame за допомогою Javascript?


121

У мене є веб-сторінка з IFrame та кнопкою, після натискання кнопки мені знадобиться оновити IFrame. Чи можливо це, якщо так, як? Я шукав і не міг знайти відповіді.


Відповіді:


152
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;

2
Для мене це працює у цій версії Chrome:Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
Пол A Jungwirth

3
FYI - Наразі (станом на січень 2013 року) є помилка проекту Chromium ( code.google.com/p/chromium/isissue/detail?id=172859 ), яка спричиняє додавання оновлень iframe до історії документів.
Роберт Альтман

Якщо в iFrame змінити сторінку, цей метод втратив навігацію
Едуардо Куомо,

10
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
lyfing

2
це прекрасно працює для мене в хроміdocument.getElementById('frame_id').contentDocument.location.reload(true);
Хазеб Зульфікар

104

Це має допомогти:

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

EDIT: Виправлено ім'я об'єкта відповідно до коментаря @ Joro.


3
Це не працює в IE9. Ви повинні використовувати contentWindow замість contentDocument.
gotqn

1
Дякую за відповідь. Крім того, якщо ви повинні позитивно викликати оновлення на іншу сторінку на іншій reload(true)document.getElementById('FrameID').contentWindow.location.replace(new_url);
рамці

15
Це не працює з iframes з різним походженням (протокол, ім'я хоста або порт).
Michelpm

18

за умови завантаження iframe з одного домену, ви можете це зробити, що має трохи більше сенсу:

iframe.contentWindow.location.reload();




2

2017:

Якщо він у тому самому домені, просто:

iframe.contentWindow.location.reload();

буду працювати.


1

Ось фрагмент HTML:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

І мій Javascript-код:

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}

1

Скидання атрибуту src безпосередньо:

iframe.src = iframe.src;

Скидання src з позначкою часу для завантаження кешу:

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

Очищення src, коли параметр рядків запиту неможливий (URI даних):

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}

1

Якщо ви використовуєте хеш-контури (наприклад, mywebsite.com/#/my/url), які можуть не оновлювати кадри для переключення хеша:

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

На жаль, якщо ви не використовуєте час очікування, JS може спробувати замінити кадр до того, як сторінка закінчить завантажувати вміст (таким чином завантажуючи старий вміст). Я ще не впевнений у вирішенні проблем.


0

Якщо у вас є кілька iFrames всередині сторінки, то цей сценарій може бути корисним. Я припускаю, що в джерелі iFrame є певне значення, яке можна використовувати для пошуку конкретної iFrame.

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

Замініть "/ yourSource" на потрібне вам значення.


0

Якщо URL-адреса вашого iframe не зміниться, ви можете просто відтворити його.

Якщо ваш iframe не з того самого походження (схема протоколу, ім'я хоста та порт), ви не зможете знати поточну URL-адресу в iframe, тому вам знадобиться сценарій у документі iframe для обміну повідомленнями з його батьківським вікном ( вікно сторінки).

У документі iframe:

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

На вашій сторінці:

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);

-2

Ви можете скористатися цим:

Js:

function refreshFrame(){
    $('#myFrame').attr('src', "http://blablab.com?v=");
}

Html:

`<iframe id="myFrame" src=""></iframe>`

JS Fiddle: https://jsfiddle.net/wpb20vzx/


1
Питання не має нічого спільного з популярною бібліотекою JavaScript під назвою jQuery.
Джон Вайс

Що б зробити Math.round ()? Тут виглядає абсолютно марно.
Девіде Р.

Привіт, я використовував Math.round (), оскільки деякий браузер може кешувати URL-адресу, тому оновлення не працює.
Ferhat KOÇER
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.