it-swarm-id.com

Apa cara terbaik untuk memuat ulang / menyegarkan iframe?

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

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

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

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

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

177
evko

Jika menggunakan jQuery, ini sepertinya berfungsi:

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

Saya harap ini tidak terlalu jelek untuk stackoverflow.

57
lousygarua
window.frames['frameNameOrIndex'].location.reload();
14
scunliffe

Tambahkan ruang kosong juga memuat ulang iFrame secara otomatis.

document.getElementById('id').src += '';
12
Yohanes AI

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.

8
big lep

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.

4
Liam M

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.

4
user2675617

Penyempurnaan pada posting yajra ... Saya suka pemikiran itu, tetapi membenci gagasan deteksi browser.

Saya lebih suka mengambil tampilan ppp menggunakan deteksi objek daripada deteksi browser, ( http://www.quirksmode.org/js/support.html ), karena dengan begitu Anda benar-benar menguji kemampuan Browser dan bertindak sesuai, daripada apa yang Anda pikirkan browser mampu 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. :)

3
Aaron Wallentine

Cukup mengganti atribut src dari elemen iframe dalam kasus saya tidak memuaskan karena orang akan melihat konten lama hingga 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);
3
Patrick Rudolph

Gunakan memuat ulang untuk IE dan mengatur src untuk peramban 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;
}
2
yajra

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
    })
}
2
Northern

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'));
2
Paresh3489227

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.

2
user1212212

Di IE8 menggunakan .Net, pengaturan iframe.src untuk pertama kalinya adalah ok, tetapi pengaturan iframe.src untuk kedua kalinya tidak menaikkan page_load dari halaman yang dibuka. Untuk mengatasinya 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.

2
Shaulian

Jika semua hal di atas tidak berhasil untuk Anda:

window.location.reload();

Ini karena beberapa alasan menyegarkan iframe saya alih-alih seluruh 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 :)

1
Marcin Janeczek

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();" />
1
Vivek Kumar

Untuk keperluan debugging, seseorang dapat membuka konsol, mengubah konteks eksekusi ke bingkai yang dia inginkan diperbarui dan melakukan document.location.reload()

0
h3dkandi

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 sedang 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 metode lain untuk bekerja adalah karena saya menguji mereka di Chrome, dan Chrome tidak akan mengizinkan Anda untuk mengakses konten iframe (Penjelasan: Apakah kemungkinan rilis konten dukungan Chrome di masa depanWindow/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.

AMENDED 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);
    }
});
0
Todd
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 
0
Sid

Solusi lain.

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

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