Jak odświeżyć ramkę iFrame za pomocą JavaScript?

Mam stronę internetową z ramką iFrame i przyciskiem, po naciśnięciu przycisku potrzebuję odświeżenia ramki iFrame. Czy to możliwe, a jeśli tak, to w jaki sposób? Szukałem i nie znalazłem żadnych odpowiedzi.

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

To powinno pomóc:

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

EDYCJA: Poprawiono nazwę obiektu zgodnie z komentarzem @ Joro.

pod warunkiem, że iframe jest ładowany z tej samej domeny, możesz to zrobić, co ma trochę więcej sensu:

iframe.contentWindow.location.reload();

Działa dla IE, Mozzila, Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);

Możesz użyć tej prostej metody

function reloadFrame(iFrame) {

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

}

Mam to stąd

var f = document.getElementById('iframe1');
f.src = f.src;

2017:

Jeśli jest w tej samej domenie, po prostu:

iframe.contentWindow.location.reload();

będzie działać.

Oto fragment kodu HTML:

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

I mój kod Javascript:

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

Bezpośrednie resetowanie atrybutu src:

iframe.src = iframe.src;

Resetowanie src ze znacznikiem czasu do pomijania pamięci podręcznej:

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

Wyczyszczenie src, gdy opcja query strings nie jest możliwa (Data URI):

var wasSrc = iframe.src

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

Jeśli używasz ścieżek z krzyżykiem (takich jak mywebsite.com/#/my/url), które mogą nie odświeżać ramek przy przełączaniu hash:

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

Niestety, jeśli nie wykorzystasz limitu czasu, JS może spróbować zamienić ramkę, zanim strona zakończy ładowanie treści (w ten sposób ładuje starą zawartość). Nie jestem jeszcze pewien obejścia tego problemu.

Jeśli na stronie znajduje się wiele elementów iFrame, ten skrypt może być przydatny. Zakładam, że w źródle iFrame istnieje określona wartość, której można użyć do znalezienia określonego elementu 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;

Zastąp „/ yourSource” wymaganą wartością.

Jeśli adres URL elementu iframe nie zmienia się, możesz go po prostu utworzyć ponownie.

Jeśli element iframe nie pochodzi z tego samego źródła (schemat protokołu, nazwa hosta i port), nie będziesz w stanie poznać bieżącego adresu URL w elemencie iframe, więc będziesz potrzebować skryptu w dokumencie iframe do wymiany wiadomości z jego oknem nadrzędnym ( okno strony).

W dokumencie iframe:

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

Na Twojej stronie:

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

Możesz użyć tego:

Js:

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

HTML:

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

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