मैं jquery का उपयोग करके किसी iframe में सामग्री को गतिशील रूप से कैसे बदलूं?

मैं सोच रहा था कि क्या यह एक iframe और कुछ jquery कोड वाली साइट हो सकती है जो iframe कंटेंट को हर 30 सेकंड में बदल देती है। सामग्री विभिन्न वेबपृष्ठों में है।

कुछ इस तरह:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var array = new array();
        array[0] = 'http://webPage1.com';
        array[1] = 'http://webPage2.com';
        // And so on.
        // Do something here to change the iframe every 30 second
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>

jquery iframe

— Audun
स्रोत

पोस्ट का निचला भाग दिखाई नहीं दे रहा है, लेकिन यह iframe वाला बेसिक html था।

— ऑडुन

@Aunun: मैं यह तुम्हारे लिए तय; अगली बार, सब कुछ हाइलाइट करें और कोड बटन का उपयोग करें। इसके अलावा, रिक्ति शांत है।

— जियोवा 4

चीजों http://webPage1.comको उद्धरण में होना चाहिए! //एक टिप्पणी करेंगे!

— जियोवा 4

जवाबों:

135

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var locations = ["http://webPage1.com", "http://webPage2.com"];
        var len = locations.length;
        var iframe = $('#frame');
        var i = 0;
        setInterval(function () {
            iframe.attr('src', locations[++i % len]);
        }, 30000);
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>

— अनातोलीय
स्रोत

रीसाइक्लिंग के साथ सरणी के माध्यम से पुनरावृति करने का एक तरीका के रूप में [++ मैं% लेन] शानदार है! इसने मुझे एक नया पैटर्न सिखाया! धन्यवाद!

— rhh

ध्यान दें कि सेटइंटरवल फ़ंक्शन के अंदर आपको "$ (iframe)" का उपयोग करने की आवश्यकता नहीं है। बल्कि आप सीधे "iframe" कर सकते हैं। कारण है कि आप पहले से ही कुछ लाइनों ऊपर jQuery वस्तु के रूप में iframe बनाया है। चीयर्स।

— मारियो अवध

यदि अंतराल को गतिशील रूप से कैसे बदला जाए?

— योहानेस एआई

इसके बजाय setTimeout का उपयोग करें

— Anatoliy

यदि आप सिर्फ वह परिवर्तन करना चाहते हैं जहाँ iframe इंगित करता है और iframe के अंदर वास्तविक सामग्री नहीं है, तो आपको केवल srcविशेषता बदलने की आवश्यकता होगी ।

 $("#myiframe").attr("src", "newwebpage.html");

— एंथोनी
स्रोत

लोड () इस तरह से उपयोग किए जाने वाला jQuery फ़ंक्शन नहीं है। लोड AJAX के लिए है

— हर्दा

लोड अजाक्स के लिए नहीं है, कृपया @Hurda प्रलेखन का संदर्भ लें ( api.jquery.com/load-event ) आप देखेंगे कि लोड कुछ लोड होने पर भी हुक करने के लिए उपयोग किया जाता है। आप एक छवि के साथ लोड का उपयोग कर सकते हैं। लेकिन, मुझे आपसे सहमत होना होगा कि एंथनी द्वारा प्रदान किए गए मामले में यह उचित नहीं है।

— पैट्रिक डेसजार्डिंस

@Doak - मुझे अभी भी लगता है कि वह api.jquery.com/load ajax लोड का उल्लेख करता है - यह कुछ सामग्री लोड करता है। वास्तविक पद्धति को मापदंडों के आधार पर चुना जाता है - इसलिए हम सुनिश्चित नहीं हो सकते हैं। मैं बस उत्सुक हूं कि आपको 11 महीने बाद मुझे ठीक करने की कोशिश करने की आवश्यकता क्यों महसूस होती है?

— २०:२० पर हर्डडा

खैर, मुझे यकीन है कि आप दोनों के बीच, आपके दोनों अधिकार हैं। जब से मैंने jquery को छुआ है तब से यह बहुत लंबा है, मुझे याद नहीं है कि लोड क्या करता है। मुझे यकीन है कि जब मैंने 25 महीने पहले जवाब लिखा था कि मैं इस धारणा के तहत था कि load()किसी भी खिड़की या दस्तावेज़ वस्तु को फिर से लोड करने के लिए इस्तेमाल किया जा सकता है। जैसा मैंने कहा, मुझे याद नहीं है कि यह वास्तव में अब क्या करता है। मुझे लगता है कि कुल मिलाकर मैं एक विकल्प प्रस्तुत करने की कोशिश कर रहा था जो सरल था और उसी-मूल नीतियों पर बातचीत करने की आवश्यकता नहीं थी।

— एंथनी

वास्तव में, मुझे लगता है कि यह बहुत हास्यास्पद हुरडा है कि मैं किस विधि का अर्थ लगाऊं, क्योंकि उनमें से कोई भी वास्तव में पूरा नहीं करेगा जो मैं सुझाव दे रहा था कि यह होगा। मैं यह क्यों सोचूंगा कि ajax के लिए एक विधि का मतलब iframe को फिर से लोड करना होगा क्योंकि मुझे लगता है कि इवेंट बाइंडिंग के लिए एक विधि इसे फिर से लोड करेगी? यदि कुछ भी हो, तो मैं शायद शुद्ध js के बारे में सोच रहा था और जिस तरह से आप "onblah" को बाध्यकारी के लिए उपयोग करते हैं और घटना को आग देने के लिए "blah"। किसी भी तरह से, विधि iframe को फिर से लोड नहीं करेगा, इसलिए मैंने अपना उत्तर संपादित किया।

— एंथनी

var handle = setInterval(changeIframe, 30000);
var sites = ["google.com", "yahoo.com"];
var index = 0;

function changeIframe() {
  $('#frame')[0].src = sites[index++];
  index = index >= sites.length ? 0 : index;
}

— geowa4
स्रोत