जावास्क्रिप्ट का उपयोग कर सीएसएस फ़ाइलों को कैसे लोड करें?


230

क्या जावास्क्रिप्ट का उपयोग कर एक HTML पृष्ठ में सीएसएस स्टाइलशीट आयात करना संभव है? यदि हां, तो यह कैसे किया जा सकता है?

पीएस जावास्क्रिप्ट मेरी साइट पर होस्ट किया जाएगा, लेकिन मैं चाहता हूं कि उपयोगकर्ता अपनी वेबसाइट के <head> टैग में डाल सकें, और यह मेरे सर्वर पर होस्ट किए गए एक सीएसएस फ़ाइल को वर्तमान वेब पेज में आयात करने में सक्षम होना चाहिए । (दोनों सीएसएस फ़ाइल और जावास्क्रिप्ट फ़ाइल दोनों मेरे सर्वर पर होस्ट की जाएगी)।

  0

वहाँ भी jQuery http://stackoverflow.com/questions/2685614/load-external-css-file-like के बारे में सवाल यह है कि -स्क्रिप्ट-इन-जेक्वायरी-जो-संगत-इन-यानी - 27 aug. 122012-08-27 10:10:19

319

यह करने का "पुराना स्कूल" तरीका है, जो उम्मीद है कि सभी ब्राउज़रों में काम करता है। सिद्धांत रूप में, आप setAttribute दुर्भाग्य से उपयोग करेंगे I6 लगातार इसका समर्थन नहीं करता है।

var cssId = 'myCss'; // you could encode the css path itself to generate id.. 
if (!document.getElementById(cssId)) 
{ 
    var head = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.id = cssId; 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = 'http://website.com/css/stylesheet.css'; 
    link.media = 'all'; 
    head.appendChild(link); 
} 

यह उदाहरण जांचता है कि सीएसएस पहले ही जोड़ा गया था, इसलिए यह केवल एक बार जोड़ता है।

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

<script type="text/javascript"> 
var file = location.pathname.split("/").pop(); 

var link = document.createElement("link"); 
link.href = file.substr(0, file.lastIndexOf(".")) + ".css"; 
link.type = "text/css"; 
link.rel = "stylesheet"; 
link.media = "screen,print"; 

document.getElementsByTagName("head")[0].appendChild(link); 
</script> 

क्लोज़िंग head से पहले कोड सम्मिलित करें:

VanillaJS

यहाँ एक उदाहरण सादे जावास्क्रिप्ट का उपयोग करता है यूआरएल का फ़ाइल नाम अंश के आधार पर एक सीएसएस लिंक head तत्व में इंजेक्षन करने के लिए है पृष्ठ प्रस्तुत करने से पहले टैग और सीएसएस लोड किया जाएगा। बाहरी जावास्क्रिप्ट (.js) फ़ाइल का उपयोग करने से अनस्टाइल सामग्री (FOUC) का फ्लैश दिखाई देगा।

+5

सीएसएस फ़ाइल लोड होने के बाद कॉलबैक चलाने के बारे में क्या? 19 jun. 122012-06-19 03:59:14

+1

यह विश्वसनीय रूप से करने के लिए काफी जटिल है। लोकप्रिय जावास्क्रिप्ट पुस्तकालयों में आमतौर पर कॉलबैक के साथ जावास्क्रिप्ट और स्टाइलशीट लोड करने का कुछ रूप होता है। उदाहरण के तौर पर, [YUI Get] देखें (http://yuilibrary.com/yui/docs/get/)। 05 aug. 122012-08-05 12:42:16

  0

देखें [Ext.util.CSS.swapStyleSheet] (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util।सीएसएस-विधि-स्वैप स्टाइलशीट) एक्सटी जेएस लाइब्रेरी 12 feb. 132013-02-12 08:50:32

+9

के लिए शायद दस्तावेज़ शॉर्टकट के लिए $ से अलग चरित्र का उपयोग करना बेहतर होगा, क्योंकि यह आसानी से jQuery में हस्तक्षेप कर सकता है (जैसा कि मेरे मामले में किया गया है); 04 sep. 132013-09-04 07:44:20

+2

@ zathrus-writer कोशिश करें jQuery.noConflic(); http://api.jquery.com/jQuery.noConflict/ 21 nov. 132013-11-21 06:20:37

+1

@jonnybojangles jQuery.noConflict का उपयोग करने का मतलब है कि आपके सभी संदर्भों को jQuery के रूप में $ के रूप में नामित करना होगा। सीएसएस लोडर के लिए एक अलग चर नाम का उपयोग करना बहुत आसान होगा। 04 jun. 142014-06-04 15:59:09

  0

@jchook मैं 22 oct. 142014-10-22 18:10:25

  0

जोड़ने से पहले 'link.onload = function() {...} 'जोड़कर कॉलबैक संलग्न करने में सक्षम था, मैंने इस कोड को आजमाया है लेकिन ठीक से काम नहीं कर रहा है 15 aug. 152015-08-15 06:57:51

  0

ग्रेट। यह क्रोम में काम करता है! 08 dec. 152015-12-08 05:29:08

  0

दुर्भाग्यवश यह अब और काम नहीं करता है। 23 apr. 172017-04-23 15:09:06

  0

[jQuery का उपयोग करके लोड कैसे करें] (https://stackoverflow.com/a/2685661/4632019) 26 feb. 182018-02-26 11:10:09


45

मुझे लगता है कि इस स्क्रिप्ट की तरह कुछ करना होगा:

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">'); 

जावास्क्रिप्ट और सीएसएस का पता पूर्ण होने के लिए अगर वे कर रहे हैं की आवश्यकता होगी:

<script type="text/javascript" src="/js/styles.js"></script> 

इस फ़ाइल में जेएस निम्न कथन शामिल अपनी साइट का संदर्भ लें।

कई सीएसएस आयात तकनीकों पर इस "Say no to CSS hacks with branching techniques" आलेख में चर्चा की गई है।

लेकिन "Using JavaScript to dynamically add Portlet CSS stylesheets" लेख भी CreateStyleSheet संभावना का उल्लेख (आईई के लिए मालिकाना विधि):

<script type="text/javascript"> 
//<![CDATA[ 
if(document.createStyleSheet) { 
    document.createStyleSheet('http://server/stylesheet.css'); 
} 
else { 
    var styles = "@import url(' http://server/stylesheet.css ');"; 
    var newSS=document.createElement('link'); 
    newSS.rel='stylesheet'; 
    newSS.href='data:text/css,'+escape(styles); 
    document.getElementsByTagName("head")[0].appendChild(newSS); 
} 
//]]> 
  0

यहां मैं 'document.createStyleSheet()' को ब्राउज़र में जोड़ने के लिए आया हूं, जिसमें यह नहीं है: http://stackoverflow.com/प्रश्न/524696/कैसे-से-create-a-style-tag-with-जावास्क्रिप्ट/524798 # 524798 22 feb. 092009-02-22 22:16:03

  0

इस प्रतिक्रिया के लिए धन्यवाद 22 feb. 092009-02-22 22:51:46

+1

बिल्कुल निश्चित नहीं है कि किस मामले में, लेकिन कुछ मामलों में, 'document.write' isn' टी की सिफारिश की क्योंकि यह खत्म हो गया आपकी वेबसाइट के पूरे शरीर को लिखता है। 12 aug. 132013-08-12 11:18:45

  0

@VonC, क्या '<style>' तत्व प्राप्त करने के बजाय '<head>' के पहले बच्चे को '(" सिर ") [0]' के माध्यम से सीधे प्राप्त करने के लिए कोई फ़ंक्शन है? 30 apr. 142014-04-30 18:32:33

  0

@Pacerier मुझे विश्वास है कि आप पाएंगे कि https://groups.google.com/forum/#!topic/prototype-scriptaculous/Bs_JYNpoC-k में चर्चा की गई है। उदाहरण के लिए यह होगा: 'var style = document.getElementsByTagName ("style") [0]; 30 apr. 142014-04-30 19:53:57

  0

document.write (url) मेरे लिए काम किया !! 13 jul. 152015-07-13 10:24:30


1

आप इस YUI library के लिए उपयोग करें या का उपयोग इस article to implement


2

YUI library क्या आप देख रहे हैं हो सकता है हो सकता है । यह क्रॉस डोमेन लोडिंग का भी समर्थन करता है।

यदि आप jquery का उपयोग करते हैं, this plugin वही काम करता है।


3

एक सामान्य jquery प्लगइन है जो सीएसएस और जेएस फाइलों को सिंक और मांग पर एसिच लोड करता है। http://code.google.com/p/rloader/


7

मैं जानता हूँ कि यह एक बहुत पुराने धागा है, लेकिन यहाँ मेरी 5 सेंट आता है: यह भी बंद ट्रैक क्या पहले ही लोड हो रहा है :) देखने रहता है।

आपकी ज़रूरतों के आधार पर ऐसा करने का एक और तरीका है।

मेरे पास एक ऐसा मामला है जहां मैं एक सीएसएस फ़ाइल केवल थोड़ी देर सक्रिय होना चाहता हूं। सीएसएस स्विचिंग की तरह। सीएसएस को सक्रिय करें और फिर किसी अन्य घटना के बाद इसे निष्क्रिय करें।

इसके बजाय सीएसएस गतिशील लोड हो रहा है और फिर इसे हटाने आप एक कक्षा/नई सीएसएस के सभी तत्वों के सामने एक आईडी जोड़ सकते हैं और फिर बस (स्विच अपने सीएसएस के आधार नोड के उस वर्ग/आईडी शरीर टैग की तरह का)।

आप इस समाधान के साथ शुरू में अधिक सीएसएस फ़ाइलों को लोड कर सकते हैं लेकिन आपके पास सीएसएस लेआउट स्विच करने का एक अधिक गतिशील तरीका है।


13

डायनामिक रूप से सीएसएस या जावास्क्रिप्ट फ़ाइल लोड करने के लिए निम्न फ़ंक्शन को कॉल करें।

function loadjscssfile(filename, filetype) { 
    if (filetype == "js") { //if filename is a external JavaScript file 
    // alert('called'); 
    var fileref = document.createElement('script') 
    fileref.setAttribute("type", "text/javascript") 
    fileref.setAttribute("src", filename) 
    alert('called'); 
    } else if (filetype == "css") { //if filename is an external CSS file 
    var fileref = document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
    } 
    if (typeof fileref != "undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

नाम के साथ पूर्ण फ़ाइल पथ filename तर्क के रूप में पास करें।


0
var fileref = document.createElement("link") 
fileref.setAttribute("rel", "stylesheet") 
fileref.setAttribute("type", "text/css") 
fileref.setAttribute("th:href", "@{/filepath}") 
fileref.setAttribute("href", "/filepath") 

मैं थाइमेलीफ का उपयोग कर रहा हूं और यह ठीक काम करता है।

var css = $("<link>", { 
    "rel" : "stylesheet", 
    "type" : "text/css", 
    "href" : "style.css" 
})[0]; 

css.onload = function(){ 
    console.log("CSS IN IFRAME LOADED"); 
}; 

document 
    .getElementsByTagName("head")[0] 
    .appendChild(css); 

3

यहाँ jQuery के तत्व निर्माण विधि (मेरी प्राथमिकता) के साथ और कॉलबैक onLoad के साथ एक रास्ता है/या सीएसएस

function loadScript(directory, files){ 
    var head = document.getElementsByTagName("head")[0] 
    var done = false 
    var extension = '.js' 
    for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script") 
    script.src = path   
    script.type = "text/javascript" 
    script.onload = script.onreadystatechange = function() { 
     if (!done && (!this.readyState || 
      this.readyState == "loaded" || this.readyState == "complete")) { 
      done = true 
      script.onload = script.onreadystatechange = null // cleans up a little memory: 
      head.removeChild(script) // to avoid douple loading 
     } 
    }; 
    head.appendChild(script) 
    done = false 
} 
} 

function loadStyle(directory, files){ 
    var head = document.getElementsByTagName("head")[0] 
    var extension = '.css' 
    for (var file of files){ 
    var path = directory + file + extension 
    var link = document.createElement("link") 
    link.href = path   
    link.type = "text/css" 
    link.rel = "stylesheet" 
    head.appendChild(link) 
} 
} 

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main']))(); 
(() => loadScript('scripts/', ['index']))(); 

(() => loadStyle('styles/', ['index']))(); 

42

आप jQuery का उपयोग करते हैं: लोड हो रहा है जे एस के लिए उपयोग कर एक पूर्ण कोड नीचे

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">'); 

1

और धन्यवाद


5

यदि आप शैली को तब तक जानना चाहते हैं (या प्रतीक्षा करें) वामो के लोड होते ही इस काम करता है:

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge 
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback) 

let fetchStyle = function(url) { 
    return new Promise((resolve, reject) => { 
    let link = document.createElement('link'); 
    link.type = 'text/css'; 
    link.rel = 'stylesheet'; 
    link.onload = function() { resolve(); console.log('style has loaded'); }; 
    link.href = url; 

    let headScript = document.querySelector('script'); 
    headScript.parentNode.insertBefore(link, headScript); 
    }); 
}; 
  0

मैं इसका उपयोग कैसे करूं 21 jul. 172017-07-21 08:27:43


1

उपयोग इस कोड:

var element = document.createElement("link"); 
element.setAttribute("rel", "stylesheet"); 
element.setAttribute("type", "text/css"); 
element.setAttribute("href", "external.css"); 
document.getElementsByTagName("head")[0].appendChild(element);