Wat is de beste manier om een iframe opnieuw te laden/verversen?

Ik wil een <iframe>opnieuw laden met JavaScript. De beste manier die ik tot nu toe heb gevonden, was het kenmerk srcvan het iframe op zichzelf in te stellen, maar dit is niet erg schoon. Enig idee?

Antwoord 1, autoriteit 100%

document.getElementById('some_frame_id').contentWindow.location.reload();

wees voorzichtig, in Firefox kan window.frames[]niet worden geïndexeerd op id, maar op naam of index

Antwoord 2, autoriteit 82%

document.getElementById('iframeid').src = document.getElementById('iframeid').src

Het zal het iframeopnieuw laden, zelfs over domeinen heen!
Getest met IE7/8, Firefox en Chrome.

Antwoord 3, autoriteit 25%

Als je jQuery gebruikt, lijkt dit te werken:

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

Antwoord 4, autoriteit 11%

Voeg lege ruimte toe en laad het iFrame ook automatisch opnieuw.

document.getElementById('id').src += '';

Antwoord 5, autoriteit 6%

window.frames['frameNameOrIndex'].location.reload();

Antwoord 6, autoriteit 3%

Vanwege het dezelfde oorsprongsbeleidwerkt dit niet bij het wijzigen van een iframe dat verwijst naar een ander domein. Als u nieuwere browsers kunt targeten, overweeg dan om HTML5’s Cross -documentberichten. Je bekijkt de browsers die deze functie ondersteunen hier: http://caniuse.com/#feat=x -doc-messaging.

Als je de HTML5-functionaliteit niet kunt gebruiken, kun je de trucs volgen die hier worden beschreven: http://softwareas.com/cross-domain-communication-with-iframes. Dat blogbericht is ook goed om het probleem te definiëren.

Antwoord 7, autoriteit 3%

Ik ben dit net tegengekomen in Chrome en het enige dat werkte, was het verwijderen en vervangen van het iframe. Voorbeeld:

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

Vrij eenvoudig, wordt niet behandeld in de andere antwoorden.

Antwoord 8, autoriteit 2%

Het simpelweg vervangen van het srcattribuut van het iframe-element was in mijn geval niet bevredigend omdat men de oude inhoud zou zien totdat de nieuwe pagina is geladen. Dit werkt beter als je direct visuele feedback wilt geven:

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

Antwoord 9, autoriteit 2%

Voor nieuwe URL

location.assign("http:google.com");

De methode toewijzen () laadt een nieuw document.

Laad

location.reload();

De methode Reload () wordt gebruikt om het huidige document opnieuw te laden.

Antwoord 10

Een verfijning op de post van Yajra … Ik hou van de gedachte, maar haat het idee van browserdetectie.

Ik neem liever het beeld van PPK op het gebruik van objectdetectie in plaats van browserdetectie,
(http://www.quirksmode.org/js/support.html ),
Want dan test je daadwerkelijk de mogelijkheden van de browser en handelt dienovereenkomstig, in plaats van wat je denkt dat de browser op dat moment in staat is. Vereist ook niet zoveel lelijke browser-ID-string-parsing en sluit niet perfect in bekwoelde browsers uit waarvan u er niets over weet.

Dus, in plaats van naar Navigator.Apppname te kijken, waarom niet zoiets, daadwerkelijk testen op de elementen die u gebruikt? (Je zou kunnen gebruiken proberen {} blokken als je nog fancier wilt krijgen, maar dit werkte voor mij.)

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

Op deze manier kunt u zoveel verschillende permutaties proberen als u wilt of nodig is, zonder javascript-fouten te veroorzaken, en iets verstandigs te doen als al het andere faalt. Het is wat meer werk om uw objecten te testen voordat u ze gebruikt, maar IMO zorgt voor betere en meer faalveilige code.

Werkte voor mij in IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) en Opera (12.0.2) op Windows.

Misschien zou ik het nog beter kunnen doen door daadwerkelijk te testen voor de herlaadfunctie, maar dat is op dit moment genoeg voor mij. 🙂

Antwoord 11

Probeer dit nu om dit te laten werken op Chrome 66:

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}

Antwoord 12

In IE8 die .Net gebruikt, is het goed om iframe.srcvoor de eerste keer in te stellen,
maar het voor de tweede keer instellen van iframe.srcverhoogt niet de page_loadvan de iframe-pagina.
Om het op te lossen heb ik iframe.contentDocument.location.href = "NewUrl.htm"gebruikt.

Ontdek het bij gebruik van jQuery thickBox en probeerde dezelfde pagina te heropenen in het thickbox-iframe.
Toen liet het gewoon de eerdere pagina zien die was geopend.

Antwoord 13

Gebruik reload voor IE en stel src in voor andere browsers. (herladen werkt niet op FF)
getest op IE 7,8,9 en Firefox

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

Antwoord 14

Als u JQuery gebruikt, is er één regelcode.

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

en als je met dezelfde ouder werkt, dan

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

Antwoord 15

Een andere oplossing.

const frame = document.getElementById("my-iframe");
frame.parentNode.replaceChild(frame.cloneNode(), frame);

Antwoord 16

Als al het bovenstaande niet voor u werkt:

window.location.reload();

Dit heeft om de een of andere reden mijn iframe vernieuwd in plaats van het hele script. Misschien omdat het in het frame zelf is geplaatst, terwijl al die getElemntById-oplossingen werken wanneer je een frame van een ander frame probeert te vernieuwen?

Of ik begrijp dit niet helemaal en praat wartaal, dit werkte in ieder geval als een tierelier 🙂

Antwoord 17

Heb je overwogen om aan de url een betekenisloze queryreeksparameter toe te voegen?

<iframe src="myBaseURL.com/something/" />
<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;
//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

Het zal niet worden gezien & als je weet dat de parameter veilig is, zou het goed moeten zijn.

Antwoord 18

<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

Antwoord 19

Als u alle andere suggesties probeerde, en niet een van hen kunt laten werken (zoals ik niet kon), hier is iets dat u kunt proberen dat nuttig kan zijn.

html

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

js

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

Ik heb in eerste instantie uiteengezet om te proberen en bespaart wat tijd met RWD- en cross-browser-testen. Ik wilde een snelle pagina maken die een stel Iframes gehuisvest, georganiseerd in groepen die ik zou laten zien / verbergen in Will. Logischerwijs wil je eenvoudig en snel een gegeven frame kunnen vernieuwen.

Ik moet opmerken dat het project waar ik op werk ben, de enige in gebruik in dit testbed, is een site met één pagina met geïndexeerde locaties (bijvoorbeeld index.html # home). Dat heeft misschien iets te maken hebben met waarom ik geen van de andere oplossingen kon krijgen om mijn specifieke frame te vernieuwen.

Dat gezegd hebbende, ik weet dat het niet het schoonste ding ter wereld is, maar het werkt voor mijn doeleinden. Hoop dat dit iemand helpt. Als ik er nu maar achter zou kunnen komen hoe ik kan voorkomen dat het iframe door de bovenliggende pagina scrolt telkens wanneer er animatie in het iframe zit…

BEWERKEN:
Ik realiseerde me dat dit het iframe niet “vernieuwt” zoals ik had gehoopt. Het zal echter de oorspronkelijke bron van het iframe opnieuw laden. Ik kan er nog steeds niet achter komen waarom ik geen van de andere opties kon laten werken..

UPDATE:
De reden dat ik geen van de andere methoden kon laten werken, is omdat ik ze aan het testen was in Chrome, en Chrome geeft je geen toegang tot de inhoud van een iframe (uitleg: Is het waarschijnlijk dat toekomstige releases van Chrome contentWindow/contentDocument ondersteunen wanneer iFrame een lokale html laadt bestand uit een lokaal html-bestand?) als het niet van dezelfde locatie afkomstig is (voor zover ik het begrijp). Na verder testen heb ik ook geen toegang tot contentWindow in FF.

GEWIJZIGDE JS

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});

Antwoord 20

Als u self.location.reload()gebruikt, wordt het iframe opnieuw geladen.

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />