2012-03-02 13 views
17

मैंने स्टैक ओवरफ्लो के माध्यम से खोज की है और इसे कैसे किया जाए इस पर विभिन्न विषयों को देखा है, लेकिन कुछ भी नहीं जो वास्तव में मेरी विशेष स्थिति से संबंधित है। मैं एक मोबाइल (एप्लिकेशन) लिख रहा हूं (एचटीएमएल 5, सीएसएस, jQuery का उपयोग कर)। यह अकेले स्टैंड "ऐप" बन जाएगा, जिसमें कुछ आवश्यक फाइलों की एक स्थानीय प्रतिलिपि होगी। मेरे पृष्ठों में से एक पर मेरे पास एक सबमिट फॉर्म है, और चूंकि उपयोगकर्ता ऑफ़लाइन होने पर फॉर्म सबमिट नहीं कर सकता है, इसलिए मैं पृष्ठ को कस्टम 404 पेज पर रीडायरेक्ट करना चाहता हूं।जांचें कि नेटवर्क से कनेक्ट है या नहीं; jQuery

मैं सिर्फ यह देखने के लिए खोज रहा था कि jQuery में इसे पूरा करने का कोई तरीका था, क्योंकि मुझे वास्तव में कुछ भी नहीं मिला है।

धन्यवाद

उत्तर

21

आप इस्तेमाल कर सकते हैं

if (navigator.onLine) { 
    // I'm online so submit the form. 
} 
+0

मैंने आपके द्वारा निर्दिष्ट किए गए प्रयास किए; अगर/दोनों के अंदर चेतावनी। यदि मैं पूरी तरह से काम करता हूं, तो मैं पूरी तरह से काम करता हूं, जब मैं अपने नेटवर्क कनेक्शन को अन्य परीक्षण करने के लिए अक्षम करता हूं, तो यह विफल रहता है और अभी भी प्रदर्शित होता है कि अगर कथन में दिखाया जाएगा। – Brendan

+0

यह मूर्ख प्रमाण नहीं है, यह ब्राउज़र से डेटा प्राप्त करता है। – Bot

+1

यह दिखाता है कि क्या आप 'ऑफ़लाइन' मोड में हैं या नहीं, मैं वास्तव में यह जांचने का एक तरीका ढूंढ रहा था कि आपके पास इंटरनेट का उपयोग है या नहीं। – Akbari

17

आप देख सकते हैं या तो navigator.onLine संपत्ति या सुनने offline/online घटनाओं के लिए:

$(document).on('offline online', function (event) { 
    alert('You are ' + event.type + '!'); 
}); 

स्रोत: http://www.html5rocks.com/en/mobile/workingoffthegrid/

और यहाँ इन घटनाओं के लिए कुछ MDN डॉक्स हैं: https://developer.mozilla.org/en/Online_and_offline_events

मैं इन घटनाओं से परिचित अपने आप नहीं कर रहा हूँ, लेकिन अगर आप ऊपर दिए गए लिंक को पढ़ने, आप अच्छी जानकारी का एक बहुत कुछ मिल जाना चाहिए।

+0

यह ऐसा करने का एक साफ तरीका है, लेकिन क्या ये ईवेंट सभी ब्राउज़रों में काम करते हैं? –

+1

बिल्कुल नहीं :)। यह एचटीएमएल 5 विशिष्ट घटनाओं का उपयोग कर रहा है, जो अभी तक एक आधिकारिक कल्पना नहीं है। यहां 'navigator.onLine' के लिए एमडीएन साइट का एक लिंक दिया गया है: https://developer.mozilla.org/en/DOM/window.navigator.onLine (ब्राउज़र समर्थन नीचे है) – Jasper

+2

@ToddMoses मुझे परीक्षण करना होगा यह सुनिश्चित करने के लिए कि यह काम करता है, लेकिन टोड मूसा का जवाब उपयोग करने के लिए एक अच्छा लगता है। लेकिन आप पूरे ढांचे के बजाय लोड करने के लिए एक छोटे से संसाधन का उपयोग कर सकते हैं। उदाहरण के लिए आप अपनी खुद की जेएस फाइल होस्ट कर सकते हैं जो वैश्विक क्षेत्र में ध्वज जोड़ता है, अगर ध्वज मौजूद है तो उपयोगकर्ता ऑनलाइन है। यह सुनिश्चित करने के लिए कि जेएस फ़ाइल कैश नहीं है, आपको फ़ाइल के लिए हेडर को हमेशा रीफ्रेश करने के लिए सेट करना होगा। – Jasper

0

यहाँ मैं, क्या करना होगा पर आधारित है: how to check if the user has the connection to the internet

पहला, अगर उपयोगकर्ता ऑनलाइन है निर्धारित करने के लिए एक जावास्क्रिप्ट पुस्तकालय लिंक का उपयोग करें। यदि सही है तो अपने फॉर्म की कार्यवाही ऑनलाइन पृष्ठ पर, और ऑफ़लाइन पृष्ठ पर बदलें।

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js></script> 
    <script> 
$('#target').submit(function() { 
    if (typeof window.$ !== 'function') { 
    $('myform').attr("action" , "offlinepage.html" ); 
    } 
    else 
    { 
    $('myform').attr("action" , "onlinepage.html" ); 
    } 
}); 
    </script> 
22

आपको वास्तव में इसके लिए jQuery की आवश्यकता नहीं है। एचटीएमएल 5 में ऑनलाइन/ऑफलाइन स्थितियों में चलने वाले अनुप्रयोगों के लिए एक साफ सुविधा है - cache manifest

<html manifest="cache.manifest"> 
इस प्रकट फ़ाइल की सामग्री

ब्राउज़र है, जो संसाधनों समारोह (NETWORK) ऑनलाइन स्थितियों की आवश्यकता है, जो कैश करने के लिए फ़ाइलें (बताता है: कैश प्रकट एक सादा पाठ <html> टैग की manifest विशेषता में संदर्भित फ़ाइल है CACHE) और ऑफ़लाइन होने पर नेटवर्क संसाधन का अनुरोध होने पर क्या करना है (FALLBACK)।

CACHE MANIFEST 
# the above line is required 

NETWORK: 
* 

FALLBACK: 
* error404.html 

CACHE: 
index.html 
about.html 
help.html 
# Plus all other resources required to make it look nice 
style/default.css 
images/logo.png 
images/backgound.png 

मैनिफेस्ट का उपयोग करते समय, ब्राउज़र पहले प्रकट होता है और बिना किसी स्क्रिप्टिंग के, ऑनलाइन या ऑफलाइन होने के आधार पर कार्य करता है।

http://dev.w3.org/html5/spec-preview/offline.html#manifests

अद्यतन:

कृपया प्रतिक्रिया सामग्री प्रकार पर महत्वपूर्ण आवश्यकता को नोट करें। सादा पाठ बस काम नहीं करता है।

text/cache-manifest एमआईएमई प्रकार का उपयोग करके प्रकट होना चाहिए।

http://dev.w3.org/html5/spec-preview/offline.html#writing-cache-manifests

भी पता है कि प्रकट में सूचीबद्ध नहीं किए गए सभी URL एक परिणाम के रूप लोड से ब्लॉक कर दिया हो। यही कारण है कि मैंने उपरोक्त मैनिफेस्ट को वाइल्डकार्ड (*) के साथ "बाकी" की अनुमति देने के लिए तय कर दिया है। इससे आपको शुरुआत करने में मदद मिल सकती है।

+0

दिलचस्प .... यह वही हो सकता है जो मैं ढूंढ रहा था ... मान लें कि मेरे पास 5 वेब पेज हैं (index.html, contact.html, about.html, rate.html, reserve.html), और सूचकांक होगा किसी भी विषय के साथ, पेज के साथ क्या कोई फर्क नहीं पड़ता। संपर्क, आरक्षित, और दरें जब मैं ऑफलाइन हूं तो कस्टम 404 पेज से लिंक करना चाहता हूं; मुझे यह कैसे करना है? – Brendan

+0

@ ब्रेंडन मैंने आपके परिदृश्य में फिट करने के लिए उत्तर अपडेट किया है। –

+0

मैंने आपको बक्षीस दिया, क्योंकि मुझे अपने सामान्य ब्राउज़र पर काम करने का आपका समाधान नहीं मिल सका, मुझे विश्वास है कि अगर मैं सख्ती से मोबाइल के लिए कोडिंग कर रहा हूं तो यह एक अच्छा तरीका है। – Brendan

3

प्रत्येक एन मिलीसेकंड (मैं यहां 1000 डालता हूं) अनुरोध करने के लिए AJAXSetup सेट अप करने का प्रयास करता हूं और जांचता हूं कि यह समय समाप्त हो गया है और फिर बटन अक्षम करें। उपयोगकर्ता किसी नेटवर्क से कनेक्ट किया जा सकता है क्योंकि, लेकिन है कि नेटवर्क इंटरनेट का उपयोग नहीं कर सकता है

$.ajaxSetup({ 
    timeout: 1000, 
    error: function(request, status, maybe_an_exception_object) { 
     if(status != 'timeout') 
      //Code to enable button 
     else 
      //Code to disable button 
    } 
}); 
+1

यह आपके ग्राहकों के बहुत सारे –

2

window.navigator.onLine का उपयोग करना, inherantly अविश्वसनीय है। मैं कनेक्टिविटी के लिए जाँच करने के लिए निम्नलिखित कोड का उपयोग कर रहा http://jsfiddle.net/3rRWK/

+1

लॉल होने पर कनेक्शन में कुछ गंभीर ओवरहेड का कारण बन सकता है। एक 3 साल पुराने उत्तर पर एक डाउनवोट प्राप्त हुआ जो वैध है। :) – Layke

3

:

हालांकि, यहां एक barebones उदाहरण

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Online status</title> 
    <script> 
    function updateIndicator() { 
    document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline'; 
    } 
    </script> 
</head> 
<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"> 
    <p>The network is: <span id="indicator">(state unknown)</span> 
</body> 
</html>​ 

कार्रवाई में बेला देखें है। नोट: फ़ायरफ़ॉक्स के लिए उपरोक्त समाधानों में से कोई भी समाधान, जो इसके आंतरिक 'वर्क ऑफ़लाइन' स्थिति पर निर्भर करता है:

// Register listeners 
window.addEventListener("offline", function(){ 
    $('#globalDiv').hide(); 
    $("#message").html('WARNING: Internet connection has been lost.').show(); 
}); 
window.addEventListener("online", function(){ 
    $("#message").empty().hide(); 
    $('#globalDiv').show(); 
}); 
+0

2015 तक यह उत्तर सबसे विश्वसनीय माना जाता है यदि आप उपयोग करने के लिए एक साधारण घटना चाहते हैं। – dlsso

+0

कोई नेटवर्क कनेक्शन नहीं होने पर पृष्ठों के माध्यम से नेविगेट करते समय मैं प्रत्येक पृष्ठ में इसे फिर से शुरू कैसे कर सकता हूं। यह काम कर रहा है लेकिन मुझे नेटवर्क के माध्यम से नेविगेशन की अनुमति देने की आवश्यकता है कि कोई नेटवर्क नहीं है। साथ ही मुझे प्रत्येक पृष्ठ में कोई नेटवर्क संदेश दिखाने की ज़रूरत नहीं है। – user2584538

+1

आप पूरे पृष्ठ को अवरुद्ध करने के चरण में पृष्ठ के शीर्ष पर बैनर के रूप में "कोई नेटवर्क" संदेश प्रदर्शित नहीं कर सकते हैं, लेकिन नेविगेशन को अनुमति देते हुए, कोई नेटवर्क कोई अन्य विषय नहीं है। इसके लिए, आपको अपने पृष्ठों को स्थानीय रूप से कैश करने की आवश्यकता है। एचटीएमएल 5 के लिए एक तंत्र है (कैश मेनिफेस्ट), कृपया संदर्भ के लिए इसका संदर्भ लें: http://www.w3schools.com/html/html5_app_cache.asp – Webomatik

संबंधित मुद्दे