कैसे निर्धारित करें किसी लिंक किए गए संसाधन लोड सफलतापूर्वक

Question

मैं निम्नलिखित जावास्क्रिप्ट का उपयोग कर रहा गतिशील स्टाइलशीट लोड करने के लिए है कि क्या:

function set_stylesheet(name) { 
    var link = document.getElementById('userstylelink'); 
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
} 

यह तय करने के नए सीएसएस फ़ाइल सफलतापूर्वक लोड किया जाता है कि क्या कोई तरीका है? यदि यह विफल रहता है, तो मैं एक डिफ़ॉल्ट स्टाइलशीट लागू करने में सक्षम होना चाहता हूं।

Answer 1

आदर्श रूप से, आप उन्हें शुरुआत में लोड करेंगे और फिर उसके बीच स्विच करेंगे।

http://www.alistapart.com/articles/alternate/

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

यह वास्तव में इस सवाल का जवाब नहीं है, लेकिन मैं इस तरह से पसंद किया जाता है लगता है।

Answer 2

मैं AJAX के माध्यम से लोड करने की सलाह दूंगा, उपयोगकर्ता की पीएमवीबीबी के रूप में प्रतिक्रिया की जांच कर रहा हूं, लेकिन अपनी स्टाइलशीट के अंत में एक डमी नियम भी रखता हूं जो एक छुपा तत्व शैलियों को दिखाता है जिसे आप जांच सकते हैं। उदाहरण के लिए, एक छिपी हुई div सीमा दें: 987 पीएक्स और यह देखने के लिए जांचें कि छुपा div की सीमा वास्तव में 987 पीएक्स है या नहीं। हां, यह उस शैली और उस तत्व पर निर्भरता पेश करता है। मैंने इस पर कई लोगों के साथ अंतहीन चर्चा की है, और वास्तव में एक बेहतर तरीका नहीं है (अभी तक)। उम्मीद है कि रों निकट भविष्य में ब्राउज़र विज्ञप्ति में कुछ ध्यान आकर्षित करने के ...

Answer 3

आप एक और इसी तरह प्रश्न यहाँ करने के लिए अपने जवाब देखने के लिए चाहते हो सकता है: Detect and log when external JavaScript or CSS resources fail to load

मूल रूप से, आप एक ऑनलोड कॉलबैक देखने के लिए जोड़ सकते हैं फ़ाइल लोड हो गई थी। (यदि आप निश्चित रूप से जेएस के माध्यम से लोड करते हैं)

Answer 4

एक नया href असाइन करने के बाद लिंक तत्व की styleSheet.cssText संपत्ति को जांचने का सबसे आसान तरीका है।

function set_stylesheet(name) { 
    var link = document.getElementById('userstylelink');  
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
    if (link.styleSheet.cssText) { 
    //if not empty string, it was loaded 
    } 
    else { 
    link.href = "default.css"; 
    } 

वैकल्पिक रूप से "onerror" घटना है जो आग जब संसाधन href सौंपा के बाद लोड करने के लिए विफल रहता है है।

Answer 5

एक ऐसा समाधान है जिसके लिए स्टाइलशीट लोड होने की कोई जावास्क्रिप्ट या पहचान की आवश्यकता नहीं है।

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