एक आइफ्रेम को फिर से लोड / ताज़ा करने का सबसे अच्छा तरीका क्या है?


242

मैं <iframe>जावास्क्रिप्ट का उपयोग करके पुनः लोड करना चाहूंगा । अब तक मुझे जो सबसे अच्छा तरीका मिला, वह iframe की srcविशेषता को खुद पर सेट करना था , लेकिन यह बहुत साफ नहीं है। कोई विचार?


4
क्या कोई कारण है कि srcविशेषता को स्वयं सेट करना साफ नहीं है? यह एकमात्र समाधान प्रतीत होता है जो ब्राउज़रों और डोमेन के पार काम करता है
mirhagk

srcयदि आप किसी अन्य स्थान पर लक्ष्य बनाते हैं, तो आपके लिए विशेषता सेट करना समस्या पैदा करता है <iframe>। फिर फ़्रेम प्रारंभिक पृष्ठ दिखाएगा जैसा कि मूल रूप से डिज़ाइन किया गया है।
ई। वैन पुटीन

जवाबों:


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

सावधान रहें, फ़ायरफ़ॉक्स में, window.frames[]आईडी द्वारा अनुक्रमित नहीं किया जा सकता है, लेकिन नाम या इंडेक्स द्वारा


26
दरअसल, क्रोम में मेरे लिए यह तरीका काम नहीं आया। कोई 'contentWindow' संपत्ति नहीं थी। हालाँकि यह document.getElementById ('some_frame_id') का उपयोग करना संभव था। स्थान। लोड (); FF और Chrome दोनों के लिए काम करने वाली विधि document.getElementById ('iframeid') थी। src = document.getElementById ('iframeid') src
Mike Bevame

1
@MikeBevz स्थान का उपयोग कर सकता है। Jquery चयनकर्ता का उपयोग करके भी लोड किया जा सकता है?
जितेन्द्र महलावत

2
निरपेक्ष यह काम है, लेकिन एक ही डोमेन मूल नीति == a
बॉबी स्टेनले

6
frames[1].location.href.reload()और window.frames['some_frame_id'].location.href.reload()भी इस्तेमाल किया जा सकता है
Daniël W. Crompton

1
यदि आप iframe विंडो तक नहीं पहुँच सकते हैं, तो आपको iframe टैग के src विशेषता को बदलना होगा।
मैकीज क्रॉसिक

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

यह iframeडोमेन भर में भी पुनः लोड होगा ! IE7 / 8, फ़ायरफ़ॉक्स और क्रोम के साथ परीक्षण किया गया।


68
document.getElementById('iframeid').src += '';यह भी काम करता है: jsfiddle.net/Daniel_Hug/dWm5k
Web_Designer

3
और अगर पेज में जोड़े जाने के बाद से iframe का स्रोत बदल गया है तो आप वास्तव में क्या करते हैं ?
नीट द डार्क एबसोल

मेरे लिए Chrome ver33 पर काम करता है! अजीब बात है कि हम बस का उपयोग नहीं कर सकते, reloadलेकिन इसकी अनुमति है।
ल्यूक

8
ध्यान दें कि अगर iframe src में हैश (जैसे http://example.com/#something) है, तो यह फ्रेम को पुनः लोड नहीं करेगा। मैंने ?v2हैश से पहले यूआरएल की तरह एक थकाऊ क्वेरी पैरामीटर जोड़ने के दृष्टिकोण का उपयोग किया है ।
user85461

यह शीर्ष पर वापस स्क्रॉल करने के लिए iframe का कारण बनता है।
मर्टक्स

60

यदि jQuery का उपयोग करते हैं, तो यह काम करने लगता है:

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

मुझे आशा है कि स्टैकओवरफ्लो के लिए यह बहुत बदसूरत नहीं है।


6
यह, बिना jQuery के: var iframe = document.getElementById("your_iframe"); iframe.src = src;
Seagrass

कृपया किसी भी भविष्य के लोगों पर ध्यान दें कि यह (और सादे js समाधान) उपयोग करने के लिए सबसे अच्छा है, क्योंकि यह क्रॉस प्लेटफॉर्म है और डोमेन में काम करता है।
मिरगक सिप

13
@ मुझे लगता है कि आप का मतलब है:var iframe = document.getElementById("your_iframe"); iframe.src = iframe.src;
अधिकतम 1:14



8

एक ही मूल नीति के कारण , यह काम नहीं करेगा जब एक अलग डोमेन के लिए एक iframe इंगित करता है। यदि आप नए ब्राउज़रों को लक्षित कर सकते हैं, तो HTML5 के क्रॉस-डॉक्यूमेंट मैसेजिंग का उपयोग करने पर विचार करें । आप उन ब्राउज़र को देखते हैं जो इस सुविधा का समर्थन करते हैं: http://caniuse.com/#feat=x-doc-messaging

यदि आप HTML5 कार्यक्षमता का उपयोग नहीं कर सकते हैं, तो आप यहां बताए गए ट्रिक का अनुसरण कर सकते हैं: http://softwareas.com/cross-domain-communication-with-iframes । उस ब्लॉग प्रविष्टि भी समस्या को परिभाषित करने का एक अच्छा काम करता है।


7

मैं अभी इसके खिलाफ क्रोम में आया हूं और केवल एक चीज जो काम कर रही है वह है आइफ्रेम को हटाना और बदलना। उदाहरण:

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

बहुत सरल, अन्य उत्तरों में शामिल नहीं।


4

नए url के लिए

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

असाइन () विधि एक नया दस्तावेज़ लोड करती है।

पुनः लोड करें

location.reload();

वर्तमान दस्तावेज़ को पुनः लोड करने के लिए पुनः लोड () विधि का उपयोग किया जाता है।


4

बस srciframe तत्व की विशेषता को बदलना मेरे मामले में संतोषजनक नहीं था क्योंकि कोई भी नया पेज लोड होने तक पुरानी सामग्री को देखेगा। यदि आप तुरंत दृश्य प्रतिक्रिया देना चाहते हैं तो यह बेहतर काम करता है:

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

मैंने सिर्फ एक ही दृष्टिकोण का परीक्षण किया है, लेकिन सेटटाइमआउट के बिना - और यह मेरे लिए काम करता है। वास्तव में, सिर्फ iframe.setAttribute ('src', iframe.getAttribute ('src'))
bonbonez

3

गजरा की पोस्ट पर एक परिशोधन ... मुझे यह विचार पसंद है, लेकिन ब्राउज़र का पता लगाने के विचार से नफरत है।

मैं इसके बजाय ब्राउज़र डिटेक्शन, ( http://www.quirksmode.org/js/support.html ) के बजाय ऑब्जेक्ट डिटेक्शन का उपयोग करने के लिए ppk का विचार लेता हूं , क्योंकि तब आप वास्तव में ब्राउज़र की क्षमताओं का परीक्षण कर रहे हैं और तदनुसार कार्य कर रहे हैं, आपको क्या लगता है कि ब्राउज़र उस समय सक्षम है। इसके अलावा इतना बदसूरत ब्राउज़र आईडी स्ट्रिंग पार्सिंग की आवश्यकता नहीं है, और पूरी तरह से सक्षम ब्राउज़रों को बाहर नहीं करता है जिनके बारे में आप कुछ भी नहीं जानते हैं।

इसलिए, navigator.AppName को देखने के बजाय, ऐसा कुछ क्यों न करें, वास्तव में आपके द्वारा उपयोग किए जाने वाले तत्वों के लिए परीक्षण? (आप कोशिश कर सकते हैं {} ब्लॉक यदि आप भी कट्टरपंथी प्राप्त करना चाहते हैं, लेकिन यह मेरे लिए काम करता है।)

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

इस तरह, आप जावास्क्रिप्ट त्रुटियों के कारण के बिना, आप की तरह कई अलग-अलग क्रमांकन की कोशिश कर सकते हैं या आवश्यक हो सकते हैं, और कुछ भी समझदार कर सकते हैं यदि बाकी सब विफल हो जाता है। उपयोग करने से पहले अपनी वस्तुओं के लिए परीक्षण करना थोड़ा अधिक काम है, लेकिन, IMO, बेहतर और अधिक विफल कैफे के लिए बनाता है।

आईई 8, फ़ायरफ़ॉक्स (15.0.1), क्रोम (21.0.1180.89 मीटर) और विंडोज पर ओपेरा (12.0.2) में मेरे लिए काम किया।

शायद मैं वास्तव में रीलोड फ़ंक्शन के लिए परीक्षण करके और भी बेहतर कर सकता था, लेकिन मेरे लिए अभी पर्याप्त है। :)


3

अब क्रोम 66 पर यह काम करने के लिए, यह प्रयास करें:

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

2

IE8 में .Net का उपयोग करना, iframe.srcपहली बार के लिए सेट करना ठीक है, लेकिन iframe.srcदूसरी बार सेट page_loadकरना आईफ्रेम पेज की स्थापना नहीं कर रहा है । इसे हल करने के लिए मैंने इस्तेमाल कियाiframe.contentDocument.location.href = "NewUrl.htm"

इसका पता तब चला जब jQuery के मोटी बॉक्स का उपयोग किया गया और गाढ़े बॉक्स में उसी पेज को फिर से खोलने की कोशिश की। तब यह सिर्फ पहले वाला पेज दिखा था जिसे खोला गया था।


2

IE के लिए पुनः लोड का उपयोग करें और अन्य ब्राउज़रों के लिए src सेट करें। (पुनः लोड एफएफ पर काम नहीं करता है) IE 7,8,9 और फ़ायरफ़ॉक्स पर परीक्षण किया गया

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

अगर आप Jquery का उपयोग कर रहे हैं तो एक लाइन कोड है।

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

और यदि आप एक ही माता-पिता के साथ काम कर रहे हैं तो

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

1

यदि उपरोक्त सभी आपके लिए काम नहीं करते हैं:

window.location.reload();

इसने किसी कारण से पूरी लिपि के बजाय मेरे इफराम को ताजा कर दिया। हो सकता है क्योंकि यह फ्रेम में ही रखा गया है, जबकि उन सभी getElemntById समाधान तब काम करते हैं जब आप एक फ्रेम को दूसरे फ्रेम से ताज़ा करने की कोशिश करते हैं?

या मुझे यह पूरी तरह से समझ में नहीं आता है और अस्पष्ट बात करता है, वैसे भी यह मेरे लिए एक आकर्षण की तरह काम करता है :)


1

क्या आपने url को अर्थहीन क्वेरी स्ट्रिंग पैरामीटर के लिए विनियोग माना है?

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

यह देखा नहीं जाएगा और यदि आप पैरामीटर सुरक्षित होने के बारे में जानते हैं तो यह ठीक होना चाहिए।


1

एक और समाधान।

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

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

इसका एक नुकसान रूट डॉक्यूमेंट DOM ट्री को संशोधित करता है और यह एक रिपेंट का कारण बनेगा। मैंने इस्तेमाल कियाvar url = ifr.src; ifr.src = null; ifr.src = url;
पॉकेटैंड

मुझे लगता है कि एक iframe को फिर से लोड करने से हमेशा उपयोग किए गए कोड की कोई बात नहीं होगी।
वासिले एलेक्जेंड्रू पेर्ट

1

उपयोग self.location.reload()करने से iframe पुनः लोड हो जाएगा।

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


1
उस पूरे मुख्य विंडो को पुनः लोड करें
pery mimon

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

1
पसंद नहीं मैं उपयोग करूँगा, लेकिन मुझे लगता है कि यह करेगा। कुछ अतिरिक्त कोड के साथ जिन्हें आप जोड़ सकते थे।
transilvlad

0

यदि आप अन्य सभी सुझावों की कोशिश करते हैं, और उनमें से किसी को भी काम करने के लिए नहीं मिल सकता है (जैसे मैं नहीं कर सकता), तो यहां कुछ आप कोशिश कर सकते हैं जो उपयोगी हो सकता है।

एचटीएमएल

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

जे एस

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

मैंने शुरू में आरडब्ल्यूडी और क्रॉस-ब्राउज़र परीक्षण के साथ कुछ समय के लिए प्रयास करने और बचाने के लिए सेट किया। मैं एक त्वरित पृष्ठ बनाना चाहता था, जो समूहों में iframes का एक समूह रखे, जिसे मैं दिखाऊंगा / छिपाऊँगा। तार्किक रूप से आप आसानी से और जल्दी से किसी भी फ्रेम को ताज़ा करने में सक्षम होना चाहते हैं।

मुझे ध्यान देना चाहिए कि वर्तमान में मैं जिस परियोजना पर काम कर रहा हूं, वह इस परीक्षण-बिस्तर में उपयोग में है, एक पृष्ठ वाली साइट है जिसमें अनुक्रमित स्थान (जैसे index.html # home) है। हो सकता है कि मेरे विशेष फ्रेम को रीफ्रेश करने के लिए मुझे कोई अन्य समाधान क्यों नहीं मिला।

यह कहने के बाद, मुझे पता है कि यह दुनिया की सबसे साफ चीज नहीं है, लेकिन यह मेरे उद्देश्यों के लिए काम करती है। आशा है कि यह किसी की मदद करता है। अब अगर केवल मैं पता लगा सकता हूँ कि आईट्रम को पेरेंट पेज को स्क्रॉल करने से कैसे रोकें तो हर बार आइफ्रेम के अंदर एनीमेशन ...

संपादित करें: मुझे एहसास हुआ कि यह iframe को "ताज़ा" नहीं करता है जैसे मुझे उम्मीद थी कि यह होगा। यह iframe के प्रारंभिक स्रोत को फिर से लोड करेगा। फिर भी यह पता नहीं लगा सकता कि मुझे काम करने के अन्य विकल्पों में से कोई क्यों नहीं मिला।

अद्यतन: कारण यह है कि मैं काम करने के लिए अन्य तरीकों में से कोई भी नहीं प्राप्त कर सका क्योंकि मैं उन्हें क्रोम में परीक्षण कर रहा था, और क्रोम आपको आइफ्रेम की सामग्री तक पहुंचने की अनुमति नहीं देगा (स्पष्टीकरण: क्या यह संभावना है कि क्रोम समर्थन सामग्री के भविष्य के रिलीज जब iFrame स्थानीय html फ़ाइल से एक स्थानीय HTML फ़ाइल लोड करता है / तो सामग्रीडायरेक्टमेंट। यदि यह उसी स्थान से उत्पन्न नहीं होता है (अब तक मैं इसे समझता हूं)। आगे के परीक्षण पर, मैं FF में या तो कंटेंटव्यू तक नहीं पहुँच सकता।

जेएस पर विचार किया

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

डीबगिंग उद्देश्यों के लिए, कंसोल उस निष्पादन संदर्भ को फ्रेम में बदल सकता है जिसे वह ताज़ा और करना चाहता है document.location.reload()

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.