Apa cara terbaik untuk memuat ulang / menyegarkan iframe?

Saya ingin memuat ulang <iframe>menggunakan JavaScript. Cara terbaik yang saya temukan sampai sekarang adalah mengatur srcatribut iframe untuk dirinya sendiri, tetapi ini tidak terlalu bersih. Ada ide?

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

hati-hati, di Firefox, window.frames[]tidak bisa diindeks oleh id, tetapi dengan nama atau indeks

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

Ini akan memuat ulang iframe, bahkan di seluruh domain! Diuji dengan IE7 / 8, Firefox dan Chrome.

Jika menggunakan jQuery, ini sepertinya berfungsi:

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

Saya harap ini tidak terlalu jelek untuk stackoverflow.

Tambahkan ruang kosong juga memuat ulang iFrame secara otomatis.

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

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

Karena kebijakan asal yang sama , ini tidak akan berfungsi ketika memodifikasi iframe yang menunjuk ke domain yang berbeda. Jika Anda dapat menargetkan browser yang lebih baru, pertimbangkan untuk menggunakan pesan lintas-dokumen HTML5 . Anda melihat browser yang mendukung fitur ini di sini: http://caniuse.com/#feat=x-doc-messaging .

Jika Anda tidak dapat menggunakan fungsionalitas HTML5, maka Anda dapat mengikuti trik yang diuraikan di sini: http://softwareas.com/cross-domain-communication-with-iframes . Entri blog itu juga melakukan pekerjaan yang baik untuk mendefinisikan masalah.

Saya baru saja menemukan ini dalam chrome dan satu-satunya hal yang berhasil adalah menghapus dan mengganti iframe. Contoh:

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

Cukup sederhana, tidak tercakup dalam jawaban lain.

untuk url baru

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

Metode assign () memuat dokumen baru.

memuat ulang

location.reload();

Metode reload () digunakan untuk memuat ulang dokumen saat ini.

Cukup mengganti srcatribut elemen iframe tidak memuaskan dalam kasus saya karena orang akan melihat konten lama sampai halaman baru dimuat. Ini berfungsi lebih baik jika Anda ingin memberikan umpan balik visual instan:

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

Penyempurnaan pada posting yajra ... Saya suka pemikiran itu, tapi benci ide deteksi browser.

Saya lebih suka mengambil tampilan ppp menggunakan deteksi objek daripada deteksi browser, ( http://www.quirksmode.org/js/support.html ), karena Anda sebenarnya sedang menguji kemampuan browser dan bertindak sesuai, alih-alih apa yang menurut Anda mampu dilakukan browser pada saat itu. Juga tidak memerlukan penguraian string ID browser yang jelek, dan tidak mengecualikan browser dengan kemampuan sempurna yang tidak Anda ketahui.

Jadi, daripada melihat navigator. AppName, mengapa tidak melakukan sesuatu seperti ini, sebenarnya menguji elemen yang Anda gunakan? (Anda dapat menggunakan blok coba {} jika Anda ingin lebih keren, tetapi ini berhasil bagi saya.)

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

Dengan cara ini, Anda dapat mencoba berbagai permutasi yang Anda inginkan atau perlu, tanpa menyebabkan kesalahan javascript, dan melakukan sesuatu yang masuk akal jika semuanya gagal. Ini sedikit lebih banyak pekerjaan untuk menguji objek Anda sebelum menggunakannya, tetapi, IMO, membuat kode yang lebih baik dan lebih gagal.

Bekerja untuk saya di IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m), dan Opera (12.0.2) pada Windows.

Mungkin saya bisa melakukan yang lebih baik dengan benar-benar menguji fungsi reload, tapi itu sudah cukup bagi saya sekarang. :)

Sekarang untuk membuatnya bekerja di chrome 66, coba ini:

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

Di IE8 menggunakan .Net, pengaturan iframe.srcuntuk pertama kalinya adalah ok, tetapi pengaturan iframe.srcuntuk kedua kalinya tidak meningkatkan page_loadhalaman buka. Untuk menyelesaikannya saya menggunakan iframe.contentDocument.location.href = "NewUrl.htm".

Temukan ketika digunakan jQuery thickBox dan coba buka kembali halaman yang sama di iframe thickbox. Kemudian itu hanya menunjukkan halaman sebelumnya yang dibuka.

Gunakan ulang untuk IE dan atur src untuk browser lain. (memuat ulang tidak berfungsi pada FF) diuji pada IE 7,8,9 dan 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;
}

Jika Anda menggunakan Jquery maka ada satu kode baris.

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

dan jika Anda bekerja dengan orang tua yang sama maka

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

Jika semua hal di atas tidak berhasil untuk Anda:

window.location.reload();

Ini karena beberapa alasan menyegarkan iframe saya dan bukan keseluruhan skrip. Mungkin karena ditempatkan di dalam bingkai itu sendiri, sementara semua solusi getElemntById berfungsi saat Anda mencoba menyegarkan bingkai dari bingkai lain?

Atau saya tidak mengerti ini sepenuhnya dan berbicara omong kosong, bagaimanapun ini bekerja untuk saya seperti pesona :)

Sudahkah Anda menganggap menambahkan ke parameter parameter string kueri yang tidak berarti?

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

Itu tidak akan terlihat & jika Anda mengetahui parameter yang aman maka itu akan baik-baik saja.

Solusi lain.

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

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

Menggunakan self.location.reload()akan memuat ulang 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> 

Jika Anda mencoba semua saran lainnya, dan tidak dapat menjalankannya (seperti saya tidak bisa), berikut adalah sesuatu yang dapat Anda coba yang mungkin berguna.

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

Awalnya saya mulai mencoba dan menghemat waktu dengan pengujian RWD dan lintas-browser. Saya ingin membuat halaman cepat yang menampung sekelompok iframe, diorganisasikan ke dalam grup yang akan saya tampilkan / sembunyikan sesuka hati. Secara logis Anda ingin dapat dengan mudah dan cepat menyegarkan setiap frame yang diberikan.

Saya harus mencatat bahwa proyek yang saya kerjakan saat ini, yang digunakan dalam test-bed ini, adalah situs satu halaman dengan lokasi yang diindeks (mis. Index.html # home). Itu mungkin ada hubungannya dengan mengapa saya tidak bisa mendapatkan solusi lain untuk menyegarkan kerangka khusus saya.

Karena itu, saya tahu itu bukan hal terbersih di dunia, tetapi itu bekerja untuk tujuan saya. Semoga ini bisa membantu seseorang. Sekarang seandainya saya bisa mencari cara untuk menjaga iframe dari menggulir halaman induk setiap kali ada animasi di dalam iframe ...

EDIT: Saya menyadari bahwa ini tidak "menyegarkan" iframe seperti yang saya harapkan. Ini akan memuat ulang sumber awal iframe. Masih tidak tahu mengapa saya tidak bisa mendapatkan opsi lain untuk bekerja ..

UPDATE: Alasan saya tidak bisa mendapatkan salah satu metode lain untuk bekerja adalah karena saya sedang menguji mereka di Chrome, dan Chrome tidak akan memungkinkan Anda untuk mengakses konten iframe (Penjelasan: Apakah mungkin rilis konten dukungan Chrome di masa depan di Windows / contentDocument ketika iFrame memuat file html lokal dari file html lokal? ) jika tidak berasal dari lokasi yang sama (sejauh yang saya mengerti). Setelah pengujian lebih lanjut, saya juga tidak dapat mengakses contentWindow di FF.

JS yang diubah

$('.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);
    }
});

Untuk keperluan debugging, seseorang dapat membuka konsol, mengubah konteks eksekusi ke frame yang dia ingin refresh dan lakukan document.location.reload()