Как обновить IFrame с помощью Javascript?

Ответы:

152
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
kjagiello
источник
2
У меня это работает в этой версии Chrome:Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
Paul A Jungwirth
3
К вашему сведению. В настоящее время (по состоянию на январь 2013 г.) существует ошибка проекта Chromium ( code.google.com/p/chromium/issues/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);
Haseeb Zulfiqar
104

Это должно помочь:

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

РЕДАКТИРОВАТЬ: исправлено имя объекта в соответствии с комментарием @Joro.

nfechner
источник
3
Это не работает в IE9. Вы должны использовать contentWindow вместо contentDocument.
gotqn
1
Спасибо за ответ. Кроме того, если вы должны принудительно вызвать обновление одной страницы для другой в рамках iframe, тогда вместо этого reload(true)вы должны использовать это:document.getElementById('FrameID').contentWindow.location.replace(new_url);
racl101
15
Это не работает с фреймами с разным происхождением (протокол, имя хоста или порт).
michelpm
18

при условии, что iframe загружается из того же домена, вы можете сделать это, что имеет немного больше смысла:

iframe.contentWindow.location.reload();
Хория Драгомир
источник
7

Работает для IE, Mozzila, Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
Марек Павелек
источник
4

Вы можете использовать этот простой метод

function reloadFrame(iFrame) {

    iFrame.parentNode.replaceChild(iFrame.cloneNode(), iFrame);

}
Василе Александру Песте
источник
2

Получил это отсюда

var f = document.getElementById('iframe1');
f.src = f.src;
Amarghosh
источник
Если в iFrame изменить страницу, этот метод потерял навигацию
Эдуардо Куомо
2

2017:

Если он находится в том же домене, просто:

iframe.contentWindow.location.reload();

буду работать.

Pery Mimon
источник
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;
}
lcharbon
источник
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 может попытаться заменить фрейм до того, как страница завершит загрузку контента (таким образом, загрузив старый контент). Я еще не уверен в обходном пути.

NotoriousPyro
источник
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);
michelpm
источник
-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 ()? Здесь это выглядит совершенно бесполезным.
Davide R.
Привет, я использовал Math.round (), потому что некоторые браузеры могут кешировать URL-страницу, поэтому обновление не работает.
Ferhat KOÇER