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




refresh reload (15)

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

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

https://code.i-harness.com

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


JQuery के साथ एक पृष्ठ को फिर से लोड करने के लिए, करें:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

यहां जिस दृष्टिकोण का मैंने उपयोग किया वह अजाक्स jQuery था। मैंने इसे Chrome 13 पर परीक्षण किया। फिर मैंने कोड को हैंडलर में रखा जो रीलोड को ट्रिगर करेगा। URL "" , जिसका अर्थ है यह पृष्ठ


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

location.reload(forceGet)

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

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

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

या केवल

location.reload()

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


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

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

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

  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>


मुझे मिला

window.location.href = "";

या

window.location.href = null;

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

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


यदि वर्तमान पृष्ठ POST अनुरोध द्वारा लोड किया गया था, तो आप इसका उपयोग करना चाहेंगे

window.location = window.location.pathname;

के बजाय

window.location.reload();

क्योंकि window.location.reload() POST अनुरोध द्वारा लोड किए गए पृष्ठ पर बुलाए जाने पर पुष्टिकरण के लिए संकेत देगा।


यह 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 उस को हल करता है

यहां कुछ कोड हैं जिन्हें आप 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(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() को 'रीफ्रेश' बटन पर क्लिक करने वाले उपयोगकर्ता के प्रभाव को ईमानदारी से पुन: पेश करने के लिए।

सवाल होना चाहिए,

JavaScript साथ एक पेज रीफ्रेश कैसे करें

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

आप पसंद के लिए खराब हो गए हैं।


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

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


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

window.location.reload();

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

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

window.location.reload(true);

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

location.reload();

Location.reload location.reload() उपयोग करें:

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

reload() फ़ंक्शन एक वैकल्पिक पैरामीटर लेता है जिसे कैश के बजाय सर्वर से पुनः लोड करने के लिए true पर सेट किया जा सकता है। पैरामीटर false डिफ़ॉल्ट है, इसलिए डिफ़ॉल्ट रूप से पृष्ठ ब्राउज़र के कैश से पुनः लोड हो सकता है।





reload