javascript मैं jQuery के साथ एक पेज रीफ्रेश कैसे कर सकता हूं?




refresh reload (18)

मैं jQuery के साथ एक पेज रीफ्रेश कैसे कर सकता हूं?


जावास्क्रिप्ट के साथ एक पृष्ठ को रीफ्रेश करने के कई तरीके हैं:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

    अगर हमें दस्तावेज़ को वेब-सर्वर से फिर से खींचने की आवश्यकता होती है (जैसे कि दस्तावेज़ सामग्री गतिशील रूप से बदलती है) तो हम तर्क को true रूप में पारित करेंगे।

आप क्रिएटिव होने वाली सूची जारी रख सकते हैं:

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


JQuery Load फ़ंक्शन एक पेज रीफ्रेश भी कर सकता है:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});

आप जावास्क्रिप्ट location.reload() विधि का उपयोग कर सकते हैं। यह विधि एक बूलियन पैरामीटर स्वीकार करती है। true या false यदि पैरामीटर true ; पृष्ठ हमेशा सर्वर से पुनः लोड किया गया। यदि यह false ; जो डिफ़ॉल्ट है या खाली पैरामीटर ब्राउज़र के साथ पृष्ठ को उसके कैश से पुनः लोड करें।

true पैरामीटर के साथ

<button type="button" onclick="location.reload(true);">Reload page</button>

default / false पैरामीटर के साथ

 <button type="button" onclick="location.reload();">Reload page</button>

Jquery का उपयोग करना

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>

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

jQuery एक क्रॉस-प्लेटफ़ॉर्म जावास्क्रिप्ट लाइब्रेरी है जो HTML की क्लाइंट-साइड स्क्रिप्टिंग को सरल बनाने के लिए डिज़ाइन किया गया है।

~ Wikipedia ~

तो आप समझेंगे कि jquery , या jquery की नींव javascript पर आधारित है। इसलिए जब सरल चीजों की बात आती है तो शुद्ध javascript साथ जाना बेहतर होता है।

लेकिन अगर आपको एक jquery समाधान की आवश्यकता है, तो यहां एक है।

$(location).attr('href', '');

मुझे मिला

window.location.href = "";

या

window.location.href = null;

एक पेज रीफ्रेश भी बनाता है।

यह किसी भी हैश को हटाने वाले पृष्ठ को फिर से लोड करना बहुत आसान बनाता है। यह बहुत अच्छा है जब मैं आईओएस सिम्युलेटर में एंगुलरजेएस का उपयोग कर रहा हूं, ताकि मुझे ऐप को दोबारा नहीं लेना पड़े।


विभिन्न कैश से संबंधित व्यवहार के साथ तीन दृष्टिकोण:

  • location.reload(true)

    उन ब्राउज़रों में जो location.reload() के forcedReload पैरामीटर को लागू करते हैं, पृष्ठ की एक ताजा प्रति और उसके सभी संसाधनों (स्क्रिप्ट, स्टाइलशीट, छवियां इत्यादि) लाकर पुनः लोड होते हैं। कैश से किसी भी संसाधन की सेवा नहीं करेगा - अनुरोध में किसी भी if-modified-since if-none-match शीर्षलेख भेजने के बिना सर्वर से ताजा प्रतियां प्राप्त होती हैं।

    ब्राउज़र में "हार्ड रीलोड" करने वाले उपयोगकर्ता के बराबर जहां यह संभव है।

    ध्यान दें कि location.reload() को true गुजरना फ़ायरफ़ॉक्स ( location.reload() देखें) और इंटरनेट एक्सप्लोरर ( MSDN देखें) में समर्थित है लेकिन सार्वभौमिक रूप से समर्थित नहीं है और डब्ल्यू 3 एचटीएमएल 5 स्पेक का हिस्सा नहीं है, न ही डब्ल्यू 3 ड्राफ्ट एचटीएमएल 5.1 spec , न ही WHATWG एचटीएमएल लिविंग स्टैंडर्ड

    असमर्थित ब्राउज़र में, जैसे Google क्रोम, location.reload(true) location.reload() के समान व्यवहार करता है।

  • location.reload() या location.reload(false)

    पृष्ठ को फिर से लोड करता है, पृष्ठ की एक ताजा, गैर-कैश की गई प्रतिलिपि प्राप्त करता है, और किसी भी संसाधन (जैसे स्क्रिप्ट्स) के लिए आरएफसी 7234 पुनर्मूल्यांकन अनुरोध निष्पादित करता है, जिसे ब्राउजर कैश किया जाता है, भले ही वे fresh , आरएफसी 7234 ब्राउज़र को सेवा करने की अनुमति देता है उन्हें पुनर्मूल्यांकन के बिना।

    एक location.reload() निष्पादित करते समय ब्राउजर को अपने कैश का उपयोग कैसे करना चाहिए। रिकॉर्ड location.reload() कॉल निर्दिष्ट नहीं है या जहां तक ​​मैं कह सकता हूं दस्तावेज किया गया है; मैंने उपरोक्त व्यवहार को प्रयोग द्वारा निर्धारित किया।

    यह उपयोगकर्ता के समतुल्य है कि बस अपने ब्राउज़र में "ताज़ा करें" बटन दबाएं।

  • location = location (या अनगिनत कई अन्य संभावित तकनीकों जिनमें location या उसके गुणों को असाइन करना शामिल है)

    केवल तभी काम करता है जब पृष्ठ के यूआरएल में एक सुगंधित / हैशबैंग न हो!

    कैश से किसी भी fresh संसाधन को रीफ्रैच या पुन: वैध किए बिना पृष्ठ को फिर से लोड करता है। यदि पृष्ठ का HTML स्वयं ताजा है, तो यह बिना किसी HTTP अनुरोध किए पृष्ठ को फिर से लोड करेगा।

    यह एक नए टैब में पृष्ठ खोलने वाले उपयोगकर्ता के बराबर (कैशिंग परिप्रेक्ष्य से) है।

    हालांकि, अगर पृष्ठ के यूआरएल में हैश है, तो इसका कोई असर नहीं पड़ेगा।

    फिर, जहां तक ​​मुझे पता है, कैशिंग व्यवहार यहां निर्दिष्ट नहीं है; मैंने इसे परीक्षण करके निर्धारित किया।

तो, संक्षेप में, आप इसका उपयोग करना चाहते हैं:

  • location = location कैश के अधिकतम उपयोग के लिए location = location , जब तक कि पृष्ठ में उसके यूआरएल में हैश नहीं है, इस मामले में यह काम नहीं करेगा
  • पुनर्स्थापना के बिना सभी संसाधनों की नई प्रतियां लाने के लिए location.reload(true) (हालांकि यह सार्वभौमिक रूप से समर्थित नहीं है और कुछ ब्राउज़रों में Chrome.reload location.reload() को अलग-अलग व्यवहार नहीं करेगा, जैसे क्रोम)
  • location.reload() को 'रीफ्रेश' बटन पर क्लिक करने वाले उपयोगकर्ता के प्रभाव को ईमानदारी से पुन: पेश करने के लिए।

कई तरीके काम करेंगे, मुझे लगता है:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;

आप उपयोग करना चाह सकते हैं

location.reload(forceGet)

forceGet एक बुलियन और वैकल्पिक है।

डिफ़ॉल्ट गलत है जो कैश से पृष्ठ को पुनः लोड करता है।

इस पैरामीटर को सही पर सेट करें यदि आप ब्राउजर को सर्वर से पृष्ठ को कैश से छुटकारा पाने के लिए मजबूर करना चाहते हैं।

या केवल

location.reload()

यदि आप कैशिंग के साथ त्वरित और आसान चाहते हैं।


यह जावास्क्रिप्ट में सबसे छोटा है।

location = '';

window.location.reload() सर्वर से पुनः लोड हो जाएगा और आपके सभी डेटा, स्क्रिप्ट, छवियों आदि को फिर से लोड करेगा।

तो अगर आप सिर्फ HTML को रीफ्रेश करना चाहते हैं, तो window.location = document.URL बहुत तेज और कम यातायात के साथ वापस आ जाएगा। लेकिन अगर यूआरएल में हैश (#) है तो यह पृष्ठ को फिर से लोड नहीं करेगा।


onclick="return location.reload();" करें onclick="return location.reload();" बटन टैग के भीतर।

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

यह jQuery के बिना भी सभी ब्राउज़रों पर काम करना चाहिए:

location.reload();

यहां एक समाधान है कि jQuery का उपयोग करके एक पृष्ठ को अतुल्यकालिक रूप से पुनः लोड करता है। यह window.location = window.location कारण झिलमिलाहट से बचाता है। यह उदाहरण एक पृष्ठ दिखाता है जो लगातार डैशबोर्ड में पुनः लोड होता है। यह युद्ध परीक्षण है और टाइम्स स्क्वायर में एक सूचना प्रदर्शन टीवी पर चल रहा है।

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

टिप्पणियाँ:

  • $.ajax का उपयोग $.ajax $.get('',function(data){$(document.body).html(data)}) तरह सीधे सीएसएस / जेएस फ़ाइलों को कैश-बस्टेड करने का कारण बनता है , भले ही आप cache: true उपयोग cache: true , यही कारण है कि हम parseHTML उपयोग parseHTML
  • parseHTML को body टैग नहीं मिलेगा, इसलिए आपके पूरे शरीर को एक अतिरिक्त div में जाना होगा, मुझे आशा है कि ज्ञान का यह गलती आपको एक दिन में मदद करेगी , आप अनुमान लगा सकते हैं कि हमने उस div लिए आईडी कैसे चुना
  • जावास्क्रिप्ट / सर्वर हिचकी के साथ कुछ गलत होने पर http-equiv="refresh" उपयोग करें, फिर पृष्ठ आपको फ़ोन कॉल प्राप्त किए बिना फिर से लोड हो जाएगा
  • यह दृष्टिकोण शायद किसी भी तरह स्मृति को रिसाव करता है, http-equiv refresh उस को हल करता है

सरल जावास्क्रिप्ट समाधान:

 location = location; 

<button onClick="location = location;">Reload</button>


शुद्ध जावास्क्रिप्ट का उपयोग करके किसी पृष्ठ को पुनः लोड करने के लिए आपको jQuery से कुछ भी चाहिए , बस इस तरह की स्थान संपत्ति पर पुनः लोड फ़ंक्शन का उपयोग करें:

window.location.reload();

डिफ़ॉल्ट रूप से, यह ब्राउज़र कैश (यदि मौजूद है) का उपयोग कर पृष्ठ को फिर से लोड करेगा ...

यदि आप पृष्ठ को फिर से लोड करना चाहते हैं, तो बस नीचे की तरह विधि को पुनः लोड करने के लिए एक वास्तविक मान पास करें ...

window.location.reload(true);

इसके अलावा यदि आप पहले से ही विंडो स्कोप में हैं , तो आप खिड़की से छुटकारा पा सकते हैं और कर सकते हैं:

location.reload();

यदि आप jQuery का उपयोग कर रहे हैं और रीफ्रेश करना चाहते हैं, तो अपने jQuery को जावास्क्रिप्ट फ़ंक्शन में जोड़ने का प्रयास करें:

मैं h3 पर क्लिक करते समय किसी पृष्ठ से आईफ्रेम छिपाना चाहता था, मेरे लिए यह काम करता था, लेकिन मैं उस आइटम पर क्लिक करने में सक्षम नहीं था जिसने मुझे शुरू करने के लिए iframe देखने की अनुमति दी, जब तक कि मैंने ब्राउज़र को मैन्युअल रूप से रीफ्रेश नहीं किया ... आदर्श नहीं ।

मैंने निम्नलिखित कोशिश की:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

अपने jQuery के साथ सादे जेन जावास्क्रिप्ट को मिलाकर काम करना चाहिए।

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);

यहां कुछ कोड हैं जिन्हें आप jQuery का उपयोग करके पृष्ठ को पुनः लोड करने के लिए उपयोग कर सकते हैं।

यह jQuery रैपर का उपयोग करता है और देशी डोम तत्व निकालता है।

यदि आप बस अपने कोड पर एक jQuery भावना चाहते हैं तो इसका उपयोग करें और आपको कोड की गति / प्रदर्शन की परवाह नहीं है।

बस अपनी आवश्यकताओं के अनुरूप 1 से 10 चुनें या इससे पहले पैटर्न और उत्तरों के आधार पर कुछ और जोड़ें।

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>

चूंकि सवाल सामान्य है, आइए जवाब के लिए संभावित समाधानों को समेटने का प्रयास करें:

सरल सादा जावास्क्रिप्ट समाधान :

एक आसान तरीका एक लाइन समाधान उचित तरीके से रखा गया है:

location.reload();

यहां कितने लोग गुम हैं, क्योंकि उन्हें कुछ "अंक" प्राप्त करने की उम्मीद है कि रीलोड () फ़ंक्शन स्वयं एक बूलियन को पैरामीटर के रूप में प्रदान करता है (विवरण: location.reload() )।

Location.reload () विधि वर्तमान यूआरएल से संसाधन पुनः लोड करता है। इसका वैकल्पिक अद्वितीय पैरामीटर एक बूलियन है, जो, जब यह सत्य होता है, तो पेज को हमेशा सर्वर से पुनः लोड किया जाता है। यदि यह गलत है या निर्दिष्ट नहीं है, तो ब्राउज़र पृष्ठ को अपने कैश से पुनः लोड कर सकता है।

इसका मतलब है कि दो तरीके हैं:

समाधान 1: सर्वर से वर्तमान पृष्ठ को पुनः लोड करने के लिए मजबूर करें

location.reload(true);

समाधान 2: कैश या सर्वर से पुनः लोड करना (ब्राउज़र और आपकी कॉन्फ़िगरेशन के आधार पर)

location.reload(false);
location.reload();

और यदि आप इसे jQuery के साथ जोड़ना चाहते हैं तो किसी ईवेंट को सुनना, मैं ".click" या अन्य ईवेंट रैपर के बजाय ".on ()" विधि का उपयोग करने की अनुशंसा करता हूं, उदाहरण के लिए एक और उचित समाधान होगा:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});




reload