Bir iframe'i yeniden yüklemenin / yenilemenin en iyi yolu nedir?

<iframe>JavaScript kullanarak yeniden yüklemek istiyorum . Şimdiye kadar bulduğum en iyi yol iframe'in srcniteliğini kendisi olarak ayarlamaktı , ama bu çok temiz değil. Herhangi bir fikir?

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

Firefox'ta dikkatli olun, window.frames[]kimliğe göre değil, ada veya dizine göre dizine eklenir

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

Etki iframealanlarında bile yeniden yüklenecek ! IE7 / 8, Firefox ve Chrome ile test edilmiştir.

JQuery kullanıyorsanız, bu işe yarıyor gibi görünüyor:

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

Umarım yığın akışı için çok çirkin değildir.

Boş alan ekleyin ayrıca iFrame'i otomatik olarak yeniden yükleyin.

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

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

Aynı kaynak politikası nedeniyle, farklı bir alana işaret eden bir iframe değiştirilirken bu çalışmaz. Daha yeni tarayıcıları hedefleyebiliyorsanız, HTML5'in Çapraz Belge mesajlarını kullanmayı düşünün . Bu özelliği destekleyen tarayıcıları burada görüntülüyorsunuz: http://caniuse.com/#feat=x-doc-messaging .

HTML5 işlevini kullanamıyorsanız, burada özetlenen hileleri takip edebilirsiniz : http://softwareas.com/cross-domain-communication-with-iframes . Bu blog girişi de sorunu tanımlamak için iyi bir iş çıkarıyor.

Sadece kromda buna karşı geldim ve işe yarayan tek şey iframe'i kaldırmak ve değiştirmekti. Misal:

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

Oldukça basit, diğer cevaplarda kapalı değil.

yeni url için

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

Assign () yöntemi yeni bir belge yükler.

Tekrar yükle

location.reload();

Reload () yöntemi geçerli belgeyi yeniden yüklemek için kullanılır.

srcYeni sayfa yüklenene kadar eski içeriği göreceğinden iframe öğesinin özniteliğini değiştirmek benim durumumda tatmin edici değildi. Anında görsel geri bildirim vermek istiyorsanız bu daha iyi çalışır:

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

Yajra'nın gönderisinde bir ayrıntılandırma ... Düşünceyi seviyorum, ancak tarayıcı algılama fikrinden nefret ediyorum.

PPK'nın tarayıcı algılaması yerine nesne algılamayı ( http://www.quirksmode.org/js/support.html ) kullanmayı tercih ediyorum , çünkü o zaman aslında tarayıcının yeteneklerini test edip buna göre hareket ediyorsunuz tarayıcının o anda yapabileceğini düşündüğünüz şey. Ayrıca çok çirkin tarayıcı kimliği dizesi ayrıştırması gerektirmez ve hakkında hiçbir şey bilmediğiniz mükemmel yetenekli tarayıcıları hariç tutmaz.

Öyleyse, navigator.AppName yerine neden böyle bir şey yapmıyorsunuz, aslında kullandığınız öğeleri test ediyor musunuz? (Daha meraklı olmak istiyorsanız try {} bloklarını kullanabilirsiniz, ancak bu benim için çalıştı.)

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

Bu şekilde, javascript hatalarına neden olmadan istediğiniz veya gerektiği kadar farklı permütasyonları deneyebilir ve her şey başarısız olursa mantıklı bir şey yapabilirsiniz. Nesnelerinizi kullanmadan önce test etmek için biraz daha fazla iş var, ancak IMO, daha iyi ve daha güvenli bir kod oluşturur.

Windows için IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) ve Opera'da (12.0.2) çalıştı.

Belki de yeniden yükleme işlevini test ederek daha iyisini yapabilirdim, ama bu benim için yeterli. :)

Şimdi bu işlemi krom 66'da yapmak için şunu deneyin:

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

.Net kullanan IE8'de iframe.src, ilk kez ayarlanması tamamdır, ancak iframe.srcikinci kez ayarlanması page_load, iframed sayfasının yükseltilmesini sağlamaz. Bunu çözmek için kullandım iframe.contentDocument.location.href = "NewUrl.htm".

JQuery thickBox kullanıldığında keşfedin ve thickbox iframe'de aynı sayfayı yeniden açmaya çalışın. Sonra açılan sayfayı daha yeni gösterdi.

IE için yeniden yükle'yi kullanın ve diğer tarayıcılar için src'yi ayarlayın. (yeniden yükleme FF'de çalışmaz) IE 7,8,9 ve Firefox'ta test edilmiştir

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

Jquery kullanıyorsanız, bir satır kodu vardır.

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

ve aynı ebeveynle çalışıyorsanız

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

Yukarıdakilerin tümü sizin için uygun değilse:

window.location.reload();

Bu herhangi bir nedenle tüm komut dosyası yerine iframeimi yeniledi. Belki de çerçevenin içine yerleştirildiği için, bir çerçeveyi başka bir çerçeveden yenilemeye çalıştığınızda tüm bu getElemntById çözümleri çalışır mı?

Ya da bunu tam olarak anlamıyorum ve anlamsız konuşuyorum, neyse bu benim için bir cazibe gibi çalıştı :)

URL'ye anlamsız bir sorgu dizesi parametresi eklemeyi düşündünüz mü?

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

Görünmez ve eğer parametrenin güvenli olduğunu biliyorsanız, o zaman iyi olmalıdır.

Başka bir çözüm.

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

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

Kullanıldığında self.location.reload()iframe yeniden yüklenir.

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

Diğer tüm önerileri denediyseniz ve bunların hiçbirini çalıştıramadım (yapamadığım gibi), burada deneyebileceğiniz faydalı olabilecek bir şey var.

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

Başlangıçta RWD ve tarayıcılar arası testlerle biraz zaman kazanmaya çalıştım. İstediğim gibi göstereceğim / gizleyeceğim gruplar halinde düzenlenmiş bir grup iframe barındıran hızlı bir sayfa oluşturmak istedim. Mantıksal olarak, herhangi bir kareyi kolayca ve hızlı bir şekilde yenilemek istersiniz.

Şu anda üzerinde çalıştığım projenin, bu test yatağında kullanılan projenin, dizine eklenmiş konumlara sahip tek sayfalık bir site olduğunu belirtmeliyim (örn. İndex.html # home). Bunun, belirli çerçevemi yenilemek için neden diğer çözümlerden hiçbirini alamadığımla ilgili bir şey olmuş olabilir.

Bunu söyledikten sonra, bunun dünyadaki en temiz şey olmadığını biliyorum, ama benim amacım için çalışıyor. Umarım bu birine yardımcı olur. Şimdi, iframe'in içinde her animasyon olduğunda iframe'in üst sayfayı kaydırmasını nasıl engelleyeceğimizi anlayabilirsem ...

EDIT: Bunun olacağını umduğum gibi iframe "yenileme" olmadığını fark ettim. Bununla birlikte, iframe'in başlangıç ​​kaynağını yeniden yükleyecektir. Neden diğer seçeneklerden hiçbirini işe alamadığımı hala anlayamıyorum ..

GÜNCELLEME: Çalışmak için diğer yöntemlerden hiçbirini alamamamın nedeni, bunları Chrome'da test ediyor olmamdı ve Chrome, bir iframe'in içeriğine erişmenize izin vermiyor (Açıklama: Chrome'un gelecekteki Chrome içeriklerinin desteklenmesinin olası olması Windows / contentDocument , aynı yerden kaynaklanmıyorsa (anladığım kadarıyla) yerel bir html dosyasını yerel html dosyasından yüklediğinde? ). Daha fazla test yapıldıktan sonra, FF'deki contentWindow'a da erişemiyorum.

DEĞİŞTİRİLMİŞ 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);
    }
});

Hata ayıklama amacıyla, konsol açılabilir yürütme bağlamını yenilenmesini istediği çerçeveye değiştirebilir ve document.location.reload()