Jaki jest najlepszy sposób na ponowne załadowanie / odświeżenie iframe?

Chciałbym ponownie załadować <iframe>JavaScript. Najlepszym sposobem, jaki do tej pory znalazłem, było ustawienie srcatrybutu iframe na siebie, ale nie jest to zbyt czyste. Jakieś pomysły?

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

uważaj, w przeglądarce Firefox window.frames[]nie można indeksować według identyfikatora, ale według nazwy lub indeksu

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

Przeładuje iframenawet w domenach! Testowane z IE7 / 8, Firefox i Chrome.

Jeśli używasz jQuery, wydaje się, że działa:

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

Mam nadzieję, że nie jest to zbyt brzydkie jak na przepełnienie stosu.

Dodaj puste miejsce również automatycznie ładuje iFrame.

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

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

Ze względu na tę samą zasadę pochodzenia nie będzie to działać podczas modyfikowania elementu iframe wskazującego inną domenę. Jeśli możesz kierować reklamy do nowszych przeglądarek, rozważ użycie komunikacji między dokumentami w HTML5 . Przeglądarki obsługujące tę funkcję można wyświetlić tutaj: http://caniuse.com/#feat=x-doc-messaging .

Jeśli nie możesz korzystać z funkcji HTML5, możesz postępować zgodnie ze wskazówkami przedstawionymi tutaj: http://softwareas.com/cross-domain-communication-withframe . Wpis na blogu również dobrze opisuje problem.

Właśnie natknąłem się na to w chromie i jedyną rzeczą, która działała, było usunięcie i zastąpienie iframe. Przykład:

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

Całkiem proste, nie ujęte w innych odpowiedziach.

dla nowego adresu URL

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

Metoda assign () ładuje nowy dokument.

przeładować

location.reload();

Metoda reload () służy do ponownego załadowania bieżącego dokumentu.

Zwykłe zastąpienie srcatrybutu elementu iframe nie było w moim przypadku zadowalające, ponieważ można było zobaczyć starą treść, dopóki nowa strona nie zostanie załadowana. Działa to lepiej, jeśli chcesz natychmiast uzyskać wizualną informację zwrotną:

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

Udoskonalenie wpisu yajry ... Podoba mi się ta myśl, ale nienawidzę pomysłu wykrywania przeglądarki.

Wolę pogląd ppk na używanie wykrywania obiektów zamiast wykrywania przeglądarki ( http://www.quirksmode.org/js/support.html ), ponieważ wtedy faktycznie testujesz możliwości przeglądarki i działasz odpowiednio, zamiast jak myślisz, co potrafi przeglądarka w tym czasie. Nie wymaga też tak brzydkiego analizowania ciągu identyfikatora przeglądarki i nie wyklucza doskonale działających przeglądarek, o których nic nie wiesz.

Zamiast patrzeć na navigator.AppName, dlaczego nie zrobić czegoś takiego, faktycznie testując elementy, których używasz? (Możesz użyć bloków try {}, jeśli chcesz stać się jeszcze bardziej wyrafinowany, ale to zadziałało dla mnie.)

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!");
    }
}

W ten sposób możesz wypróbować tyle różnych permutacji, ile chcesz lub jest to konieczne, bez powodowania błędów javascript i zrobić coś sensownego, jeśli wszystko inne zawiedzie. Jeszcze trochę pracy wymaga przetestowanie obiektów przed ich użyciem, ale IMO zapewnia lepszy i bardziej bezpieczny kod.

Pracowałem dla mnie w IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) i Opera (12.0.2) w systemie Windows.

Może mógłbym zrobić jeszcze więcej, testując funkcję przeładowania, ale teraz to mi wystarczy. :)

Teraz, aby to działało na chrome 66, spróbuj tego:

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

W IE8 przy użyciu .Net ustawienie po iframe.srcraz pierwszy jest prawidłowe, ale ustawienie iframe.srcpo raz drugi nie podnosi page_loadstrony iframed. Aby go rozwiązać, użyłemiframe.contentDocument.location.href = "NewUrl.htm" .

Odkryj go, gdy używał jQuery thickBox i próbował ponownie otworzyć tę samą stronę w ramce iframe. Następnie pokazał tylko wcześniejszą otwartą stronę.

Użyj reload dla IE i ustaw src dla innych przeglądarek. (przeładowanie nie działa na FF) przetestowane na IE 7,8,9 i 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;
}

Jeśli używasz Jquery, istnieje jeden kod wiersza.

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

a jeśli pracujesz z tym samym rodzicem, to

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

Jeśli wszystkie powyższe nie działają dla Ciebie:

window.location.reload();

To z jakiegoś powodu odświeżyło mój iframe zamiast całego skryptu. Może dlatego, że jest umieszczony w samej ramce, podczas gdy wszystkie te rozwiązania getElemntById działają, gdy próbujesz odświeżyć ramkę z innej ramki?

Albo nie rozumiem tego w pełni i nie mówię bełkotu, w każdym razie działało to dla mnie jak urok :)

Czy rozważałeś dodanie do adresu URL bez znaczenia parametru ciągu zapytania?

<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>

Nie będzie to widoczne, a jeśli wiesz, że parametr jest bezpieczny, powinno być dobrze.

Inne rozwiązanie.

const frame = document.getElementById("my-iframe");

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

Użycie self.location.reload()spowoduje ponowne załadowanie elementu iframe.

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

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

Jeśli wypróbowałeś wszystkie inne sugestie i nie udało Ci się uruchomić żadnej z nich (tak jak ja nie mogłem), oto coś, co możesz wypróbować, co może być przydatne.

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);
});

Początkowo próbowałem zaoszczędzić trochę czasu dzięki RWD i testowaniu w różnych przeglądarkach. Chciałem stworzyć szybką stronę zawierającą kilka elementów iframe, zorganizowanych w grupy, które chciałbym pokazywać / ukrywać do woli. Logicznie rzecz biorąc, chcesz mieć możliwość łatwego i szybkiego odświeżenia dowolnej klatki.

Powinienem zauważyć, że projekt, nad którym obecnie pracuję, ten wykorzystywany w tym stanowisku testowym, jest jednostronicową witryną z indeksowanymi lokalizacjami (np. Index.html # home). To mogło mieć coś wspólnego z tym, że nie mogłem znaleźć żadnego z innych rozwiązań, aby odświeżyć moją ramkę.

Powiedziawszy to, wiem, że nie jest to najczystsza rzecz na świecie, ale działa na moje potrzeby. Mam nadzieję, że to komuś pomoże. Teraz gdybym tylko mógł wymyślić, jak powstrzymać iframe przed przewijaniem strony nadrzędnej za każdym razem, gdy wewnątrz iframe znajduje się animacja ...

EDYCJA: Zdałem sobie sprawę, że to nie „odświeża” iframe, jak się spodziewałem. Jednak przeładuje początkowe źródło iframe. Nadal nie mogę zrozumieć, dlaczego nie udało mi się uruchomić żadnej innej opcji.

AKTUALIZACJA: Powodem, dla którego nie udało mi się uruchomić żadnej z innych metod, jest to, że testowałem je w Chrome, a Chrome nie pozwala na dostęp do treści elementu iframe (Objaśnienie: Czy prawdopodobne jest, że przyszłe wydania zawartości obsługującej ChromeWindow / contentDocument, gdy iFrame ładuje lokalny plik HTML z lokalnego pliku HTML? ), jeśli nie pochodzi on z tej samej lokalizacji (o ile rozumiem). Po dalszych testach nie mogę również uzyskać dostępu do contentWindow w FF.

ZMIENIONY 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);
    }
});

W celu debugowania można otworzyć konsolę, zmienić kontekst wykonania na ramkę, którą chce się odświeżyć i zrobić document.location.reload()