it-swarm-tr.com

Bir iframe'i yeniden yüklemek / yenilemek için en iyi yol nedir?

JavaScript kullanarak bir <iframe> yüklemek istiyorum. Şimdiye kadar bulduğum en iyi yol iframe’in src özelliğini kendine ayarlamıştı, ancak bu çok temiz değil. Herhangi bir fikir?

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

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

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

Etki alanlarında bile iframe öğesini yeniden yükler! IE7/8, Firefox ve Chrome ile test edilmiştir.

180
evko

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

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

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

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

Boş alan ekle, iFrame'i otomatik olarak yeniden yükler.

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

Aynı Köken politikası nedeniyle, bu, farklı bir alana işaret eden bir iframe değiştirilirken çalışmaz. Daha yeni tarayıcıları hedefleyebiliyorsanız, HTML5'in Belgeler arası mesajlaşma komutunu kullanın. Bu özelliği destekleyen tarayıcıları burada görüntüleyin: http://caniuse.com/#feat=x-doc-messaging .

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

8
big lep

Buna sadece chrome ile geldim ve işe yarayan tek şey iframe'i çıkarmak ve değiştirmekti. Örnek:

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

Oldukça basit, diğer cevaplarda ele alınmamış.

6
Liam M

Sadece iframe öğesinin src özniteliğini değiştirmek benim durumumda tatmin edici değildi çünkü yeni sayfa yükleninceye kadar eski içerik görülebiliyordu. Anlık görsel geribildirim vermek istiyorsanız, bu daha iyi sonuç verir:

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

yeni url için

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

Assign () yöntemi yeni bir belge yüklüyor.

tekrar yükle

location.reload();

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

4
user2675617

Yajra'nın gönderisinde bir inceltme ... Düşünce hoşuma gidiyor, ancak tarayıcı algılama fikrinden nefret ediyorum.

Ppk'nin tarayıcı tespiti yerine nesne tespitini kullanma fikrini tercih ediyorum, ( http://www.quirksmode.org/js/support.html ), çünkü aslında yeteneklerini test ediyorsunuz. tarayıcı ve buna göre hareket etmek, tarayıcının o sırada ne yapabileceğini düşündüğünüzden ziyade Ayrıca çok çirkin tarayıcı kimliği dize ayrıştırma gerektirmez ve hakkında hiçbir şey bilmediğiniz mükemmel yetenekli tarayıcıları dışlamaz.

Öyleyse, navigator.AppName 'e bakmak yerine, neden böyle bir şey yapmıyorsun, gerçekte kullandığın elementleri test ediyor? (Daha da meraklısı 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 kadar veya istediğiniz kadar farklı permütasyonu deneyebilir ve diğerleri başarısız olursa, mantıklı bir şey yapabilirsiniz. Nesnelerinizi kullanmadan önce sınamak için biraz daha iş, ancak, IMO daha iyi ve daha güvenli kodlar için yapar.

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

Belki aslında yeniden yükleme işlevini test ederek daha da iyisini yapabilirim, ama şu anda bu benim için yeterli. :)

3
Aaron Wallentine

Şimdi bu çalışmayı chrome 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
    })
}
3
Northern

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 edildi

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

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

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

ve eğer aynı ebeveyn ile çalışıyorsanız

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

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>

Bu görülmeyecek ve eğer parametrenin emniyetli olduğunun farkındaysanız, o zaman iyi olmalı.

2
user1212212

.Net kullanarak IE8'de, ilk kez iframe.src ayarının yapılması tamam, ancak ikinci kez iframe.src ayarının yapılması iframed sayfasının page_load değerini yükseltmiyor. Bunu çözmek için iframe.contentDocument.location.href = "NewUrl.htm" kullandım.

JQuery thickBox kullanıldığında ve aynı sayfayı thickbox iframe içinde tekrar açmaya çalıştığında keşfedin. Sonra sadece açılan önceki sayfayı gösterdi.

2
Shaulian

Yukarıdakilerin tümü sizin için işe yaramazsa:

window.location.reload();

Bu, bir nedenden ötürü tüm senaryo yerine iframe'imi yeniledi. Belki çerçevenin içine yerleştirildiği için, tüm bu getElemntById çözümleri başka bir çerçeveden bir çerçeveyi yenilemeye çalıştığınızda çalışır?

Ya da tam olarak anlamıyorum ve saçma sapan konuşmam, yine de benim için bir cazibe gibi çalıştı :)

1
Marcin Janeczek

self.location.reload() kullanılması, iframe'i yeniden yükler.

<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

Bir hata ayıklama amacıyla bir konsolu açmak olabilir yürütme bağlamı yenilenmesini istediği çerçeveye değiştirmek ve document.location.reload()

0
h3dkandi

Diğer tüm önerileri denediyseniz ve hiçbirinin çalışmasını sağlayamadıysanız (yapamadığım gibi), işte işe yarayabilecek bir şey.

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 çapraz tarayıcı testiyle biraz zaman kazanmak için yola çıktım. İstediğimde göstereceğim/saklayacağım gruplar halinde düzenlenmiş bir grup iframe içeren hızlı bir sayfa oluşturmak istedim. Mantıksal olarak, herhangi bir çerçeveyi kolayca ve hızlı bir şekilde yenilemek isteyebilirsiniz.

Şu anda üzerinde çalıştığım projenin, bu test yatağında kullanılan projenin, indekslenmiş konumlara sahip tek sayfalık bir site olduğunu belirtmeliyim (örneğin, index.html # home). Bunun, kendi çerçevemi yenilemek için diğer çözümlerden hiçbirini alamadığım ile ilgisi olabilir.

Bunu söyledikten sonra, bunun dünyadaki en temiz şey olmadığını biliyorum, ama bu benim amacım için işe yarıyor. Umarım bu birine yardımcı olur. Şimdi iframe'nin iframe içinde her animasyonda ana sayfayı kaydırmasını nasıl önleyeceğimi bir bilseydim ...

EDIT: Bunun iframe 'in umduğu gibi "yenilenmediğini" fark ettim. Yine de iframe'in başlangıç ​​kaynağını yeniden yükleyecektir. Neden diğer seçeneklerden hiçbirini işe alamadığımı hala çözemiyorum.

GÜNCELLEME: Çalışmak için başka yöntemlerden birini alamamamın nedeni, onları Chrome'da test ediyor olmamdı ve Chrome bir iframe'nin içeriğine erişmenize izin vermez (Açıklama: Gelecekteki Chrome sürümünün _Frame yerel html dosyasından yerel bir html dosyası yüklediğinde contentWindow/contentDocument desteği olabilir mi? =) aynı konumdan gelmiyorsa (anladığım kadarıyla). Daha fazla test üzerine, FF'deki contentWindow'a da erişemiyorum.

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

Başka bir çözüm.

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

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