JQuery के साथ एक iframe पुनः लोड करें


151

मेरे पास एक पृष्ठ पर दो iframes हैं और एक दूसरे में परिवर्तन करता है, लेकिन अन्य iframe तब तक परिवर्तन नहीं दिखाता जब तक मैं ताज़ा नहीं करता। वहाँ jQuery के साथ इस iframe ताज़ा करने के लिए एक आसान तरीका है?

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>

3
क्या आइफ्रेम दस्तावेज एक अलग डोमेन पर है?
पेका

क्या आपके पास उस साइट के कोड तक पहुंच है जो iFrame में दिखाई देती है?
मैट असबरी

अधिक कोड दिखाएं - दोनों iFrames के लिए html, और जावास्क्रिप्ट कोड भी जो आप बदलाव करने के लिए उपयोग कर रहे हैं। यह पता लगाना कठिन है कि केवल वही समस्या जिसे आपने अभी तक शामिल किया है।
बेन ली

मेरे पास कोड हाँ और iframe का उपयोग एक अलग डोमेन पर है
मैट एल्होटीबी

@ मैट, फ़्रेम को अन्य डोमेन पर फ़्रेम की सामग्री में परिवर्तन करने की अनुमति नहीं है। इस क्रॉस-डोमेन स्क्रिप्टिंग प्रतिबंध के आसपास कैसे काम करें, इसके उदाहरणों के लिए देखें: softwareas.com/cross-domain-communication-with-iframes
बेन ली

जवाबों:


174

यदि iframe अलग डोमेन पर नहीं था, तो आप कुछ इस तरह से कर सकते हैं:

document.getElementById(FrameID).contentDocument.location.reload(true);

लेकिन जब से iframe एक अलग डोमेन पर है, तो आपको समान-मूल नीतिcontentDocument द्वारा iframe की संपत्ति तक पहुंच से वंचित कर दिया जाएगा ।

लेकिन यदि आप अपने कोड iframe के मूल पृष्ठ पर चल रहे हैं, तो इसे फिर से लोड करने के लिए आप क्रॉस-डोमेन iframe को हैक करने के लिए बाध्य कर सकते हैं। ऐशे ही:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

यदि आप किसी अन्य iframe से आइफ्रेम फिर से लोड करने की कोशिश कर रहे हैं, तो आप भाग्य से बाहर हैं, कि है नहीं संभव।


19
उनका सवाल यह था कि jQuery के साथ इसे कैसे पूरा किया जाए - जावास्क्रिप्ट नहीं। सही jQuery के जवाब के लिए नीचे Sime Vidas की पोस्ट देखें।
फास्टट्रैक

2
मेरे IE9 में स्क्रिप्ट काम नहीं करती (अन्य संस्करण की जाँच नहीं)। परिवर्तन contentDocument को contentWindow यह IE9 पर काम करता है। document.getElementById(FrameID).contentWindow.location.reload(true);
हान वह

3
यह मेरे लिए काम नहीं करता था, हालांकि मैंने iframe.contentDocument.location=iframe.src; इसके बजाय कुछ ऐसा किया जो बहुत अच्छा काम किया
glitchyme

3
यह जेकरी मेरे लिए एक आकर्षण की तरह काम करता है:$('#map_iframe').attr('src', $('#map_iframe').attr('src'));
टोपेर हंट

234
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

2
आईडी के लिए केवल एक संदर्भ होने के लिए, एक को बदलने की संभावना कम है लेकिन दूसरे को भूल जाओ
मैथ्यू लॉक

1
@ निकोलासार्दु इसके अलावा, यह:(function (elem) { elem.src = elem.src; }($('#iframe')[0]));
विद्या

1
अन्य परिवर्तन के भीतर से एक iframe को फिर से लोड करने के लिए: $ ('# iframe', window.parent -ocument) .attr ('src', function (i, val) {रिटर्न वैल;});
टिलिटो

Internet Explorer जावास्क्रिप्ट समाधान पर जैसे document.getElementById(FrameID).contentWindow.location.reload(true);ठीक से काम नहीं कर रहे हैं। यह उत्तर बेहतर काम करता है।
बेयजकपालन

55

आप jquery का उपयोग भी कर सकते हैं। यह वही है जो एलेक्स ने JQuery का उपयोग करके प्रस्तावित किया था:

 $('#currentElement').attr("src", $('#currentElement').attr("src"));

3
इस समाधान का लाभ पठनीयता है। हालांकि विदस के जवाब के रूप में कुशल नहीं है, यह स्पष्ट है कि क्या हो रहा है।
बजे रॉबर्ट एगिंटन जूल

मैं सहमत हूं, मैं इस समाधान की पठनीयता को भी तरजीह देता हूं
योनातन नोर

var f = $('#iframeX') ; f.attr( 'src', f.attr( 'src' ))बनाए रखने और पढ़ने के लिए और अधिक मजबूत हो सकता है
एंड्रियास डिट्रीच

9

JQuery के साथ एक iframe पुनः लोड करें

iframe के अंदर एक लिंक बनाने की अनुमति देता है आईडी = "पुनः लोड करें" के साथ फिर निम्नलिखित कोड का उपयोग करें

$('#reload').click(function() {
    document.location.reload();
});

और आप सभी ब्राउज़रों के साथ जाने के लिए अच्छे हैं।

HTML के साथ एक आइफ्रेम पुनः लोड करें (कोई जावा स्क्रिप्ट नहीं।)

इसका अधिक सरल समाधान है: जो बिना javaScript (FF, Webkit) के काम करता है

बस एक लंगर बनाओ अपने आइफ्रेम के अंदर

   <a href="#" target="_SELF">Refresh Comments</a>

जब आप इस एंकर पर क्लिक करते हैं तो यह आपके आइफ्रेम को ताज़ा कर देता है

लेकिन अगर आपके पास पैरामीटर अपने iframe को भेजते हैं तो इसे निम्नानुसार करें।

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

किसी भी पृष्ठ url की आवश्यकता नहीं है क्योंकि -> लक्ष्य = "_ SELF" इसे आपके लिए करें


9

jquery के साथ आप इसका उपयोग कर सकते हैं:

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

यह समाधान यदि आप वर्तमान iframe को ताज़ा करना चाहते हैं, तो हम कहाँ हैं। बहुत बहुत धन्यवाद!
DaemonHK

5

बस एलेक्स के जवाब पर फिर से jQuery के साथ

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);


3

मुझे पूरा यकीन है कि उपरोक्त सभी उदाहरण केवल अपने मूल src के साथ iframe को फिर से लोड करते हैं, न कि इसके वर्तमान URL के।

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

जिसे वर्तमान url का उपयोग करके पुनः लोड करना चाहिए।


2

यदि आप क्रॉस-डोमेन हैं, तो बस src को उसी url पर सेट करना हमेशा एक पुनः लोड को ट्रिगर नहीं करेगा, भले ही स्थान बदल गया हो।

मैन्युअल रूप से ट्विटर बटन iframes का निर्माण करते समय इस समस्या में भाग गया, जब मैं url को अद्यतन नहीं करता।

बटन जैसे ट्विटर का रूप है: .../tweet_button.html#&_version=2&count=none&etc=...

चूँकि Twitter url के लिए दस्तावेज़ के टुकड़े का उपयोग करता है, इसलिए हैश / टुकड़ा को बदलना स्रोत को पुनः लोड नहीं करता है, और बटन लक्ष्य मेरे नए AJAX लोड सामग्री को प्रतिबिंबित नहीं करते हैं।

आप पुनः लोड करने के लिए बल के लिए एक क्वेरी स्ट्रिंग पैरामीटर को जोड़ सकते हैं (जैसे: "?_=" + Math.random() लेकिन यह बैंडविड्थ को बर्बाद कर देगा, विशेष रूप से इस उदाहरण में जहां ट्विटर का दृष्टिकोण विशेष रूप से कैशिंग को सक्षम करने की कोशिश कर रहा था।

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

 var old = iframe.src;
 iframe.src = '';
 setTimeout( function () {
    iframe.src = old;
 }, 0);

अद्यतन : इस दृष्टिकोण का उपयोग अवांछित इतिहास आइटम बनाता है। इसके बजाय, प्रत्येक बार iframe तत्व को निकालें और पुनः बनाएँ, जो इस बैक () बटन को अपेक्षित रूप से काम करता रहता है। टाइमर न होना भी अच्छा है।


2

सिर्फ एलेक्स के जवाब पर फिर से jQuery के साथ:

var e = $('#myFrame');
    e.attr("src", e.attr("src"));

या आप छोटे फ़ंक्शन का उपयोग कर सकते हैं:

function iframeRefresh(e) {
    var c = $(e);
        c.attr("src", c.attr("src"));
}

मुझे उम्मीद है यह मदद करेगा।



1

यह सरल जावास्क्रिप्ट के साथ संभव है।

  • IFrame1 में, जावास्क्रिप्ट फ़ंक्शन करें जिसे बॉडी टैग ऑनलोड में कहा जाता है। मेरे पास यह एक सर्वर साइड वैरिएबल है जिसे मैंने सेट किया है, इसलिए यह iframe2 में जावास्क्रिप्ट फ़ंक्शन को चलाने की कोशिश नहीं करता है जब तक कि मैंने iframe1 में एक विशिष्ट कार्रवाई नहीं की है। आप इसे एक बटन प्रेस द्वारा निकाल दिए गए फ़ंक्शन के रूप में सेट कर सकते हैं या फिर आप iframe1 में करना चाहते हैं।
  • तो iframe2 में, आपके पास नीचे दी गई सूची में दूसरा फ़ंक्शन है। Iframe1 में फ़ंक्शन मूल रूप से मूल पृष्ठ पर जाता है और फिर window.framesiframe2 में जावास्क्रिप्ट फ़ंक्शन को फायर करने के लिए सिंटैक्स का उपयोग करता है । बस iframe2 के id/ nameका उपयोग करना सुनिश्चित करें और नहीं src
//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

//function in iframe2
function refreshPage()
{   
    document.location.reload();
}

1

// पृष्ठ पर सभी iframes ताज़ा करें

var f_list = document.getElementsByTagName('iframe');

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }

0
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

क्रॉस-ब्राउज़र समाधान है:

    ifrX.src = ifrX.contentWindow.location

यह विशेष रूप से तब उपयोगी होता है जब <iframe> एक <form> का लक्ष्य होता है


क्यों jQuery?! जब सरल js उपलब्ध है
bortunac

0

हल किया! मैं स्टॉकओवरफ़्लो में आपको एकमात्र समाधान साझा करने के लिए पंजीकृत करता हूं (कम से कम ASP.NET/IE/FF/Chrome में) जो काम करता है! विचार एक div के भीतर के HTML मान को उसके वर्तमान इनर HTML मान द्वारा प्रतिस्थापित करने का है।

यहाँ HTML स्निपेट दिया गया है:

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless  ></IFRAME>
</div>

और मेरा जावास्क्रिप्ट कोड:

function refreshGranite() {           
   var iframe = document.getElementById('divGranite')
   iframe.innerHTML = iframe.innerHTML;
}

उम्मीद है की यह मदद करेगा।


इस उत्तर में एकाधिक त्रुटियां: 1. ASP.NET घटक नहीं, इसलिए runat="server"लागू नहीं है; 2. सभी टोपियां क्यों IFRAME? 3. आयाम विशेषता मानों की कोई इकाई नहीं है; 4. frameborderपदावनत किया जाता है
रैप्टर

0

आपको उपयोग करने की आवश्यकता है

[0] .src

माता-पिता के समान डोमेन पर iframe और उसके URL के स्रोत को खोजने की आवश्यकता है।

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}

0

आप इसे इस तरह से कर सकते हैं

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });

-5

नीचे दिए गए समाधान सुनिश्चित करने के लिए काम करेंगे:

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