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

316

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

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

javascript  html  css  dhtml 
— Upvote पर क्लिक करें
स्रोत
— jcubic

जवाबों:

416

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

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);
}

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

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

VanillaJS

यहाँ एक उदाहरण है जो headURL के फ़ाइलनाम भाग के आधार पर सीएसएस लिंक को इंजेक्ट करने के लिए सादे जावास्क्रिप्ट का उपयोग करता है :

<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टैग से ठीक पहले डालें और पृष्ठ को प्रस्तुत करने से पहले CSS लोड किया जाएगा। बाह्य जावास्क्रिप्ट ( .js) फ़ाइल का उपयोग करने से फ्लैश ऑफ अनस्टाइल कंटेंट ( FOUC ) दिखाई देगा।

— card100
स्रोत
6
CSS फ़ाइल लोड होने के बाद कॉलबैक चलाने के बारे में क्या?
— 19'12
1
यह मज़बूती से करने के लिए काफी अधिक जटिल है। लोकप्रिय जावास्क्रिप्ट पुस्तकालयों में अब आमतौर पर कॉलबैक के साथ लोडिंग जावास्क्रिप्ट और स्टाइलशीट के कुछ रूप होते हैं। एक उदाहरण के रूप में, YUI Get देखें ।
9
शायद दस्तावेज़ शॉर्टकट के लिए $ की तुलना में किसी अन्य वर्ण का उपयोग करना बेहतर होगा, क्योंकि यह आसानी से jQuery के साथ हस्तक्षेप कर सकता है (जैसा कि मेरे मामले में किया गया था);)
— ज़ाथ्रस राइटर
2
@ jonnybojangles jQuery.noConflict का उपयोग करने का अर्थ होगा आपके सभी संदर्भों का नाम बदलकर jQuery के रूप में $। यह सीएसएस लोडर के लिए एक अलग चर नाम का उपयोग करने के लिए बहुत सरल होगा।
— tommypyatt 15
2
@jchook मैं संलग्न होने से link.onload = function(){ ... }पहले एक कॉलबैक संलग्न करने में सक्षम था
— लाउंज
74

यदि आप jquery का उपयोग करते हैं:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
— BoumTAC
स्रोत
1
यह केवल तभी काम करता है जब स्टाइलशीट पगेलॉड सही से पहले इंजेक्ट किया जाता है? जब मैं इस कमांड को एक लोडेड पेज पर कंसोल में एक सीएसएस फ़ाइल के साथ चलाता हूं जिसे मैंने ड्रॉपबॉक्स पर होस्ट किया है तो यह काम नहीं करेगा। किसी भी विचार कैसे मैं यह काम कर सकते हैं:$('head').append('<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/ep1nzckmvgjq7jr/remove_transitions_from_page.css">');
— thomas
50

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

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

इस JS फाइल में निम्नलिखित कथन है:

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

जावास्क्रिप्ट और सीएसएस के पते को निरपेक्ष रखने की आवश्यकता होगी यदि वे आपकी साइट का संदर्भ दें।

कई सीएसएस आयात तकनीकों में इस पर चर्चा की जाती है "ब्रांचिंग तकनीकों के साथ सीएसएस को हैक न करें" लेख।

लेकिन "जावास्क्रिप्ट का उपयोग पोर्टलेट सीएसएस स्टाइलशीट को गतिशील रूप से जोड़ने के लिए" लेख में क्रिएटसेलेटशीट संभावना (IE के लिए स्वामित्व विधि) का भी उल्लेख किया गया है:

<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);
}
//]]>
— VonC
स्रोत
यहाँ मैं क्या करने के document.createStyleSheet()लिए ब्राउज़रों के साथ जोड़ने के लिए आया था जो यह नहीं है: stackoverflow.com/questions/524696/…
— क्रिस्टोफ
1
निश्चित रूप से इस मामले में निश्चित नहीं है, लेकिन कुछ मामलों में, document.writeयह अनुशंसित नहीं है क्योंकि यह आपकी वेबसाइट के संपूर्ण निकाय को अधिलेखित करता है।
— एडुआर्ड लुका
@VonC, वहाँ एक समारोह सीधे प्राप्त करने के लिए है <style>तत्व के बजाय यह सोचते हैं इसके बारे में पहले बच्चे है की <head>के माध्यम से ("head")[0]?
— पचेरियर
@Pacerier मेरा मानना है कि आपको लगता है कि में चर्चा मिलेगा groups.google.com/forum/#!topic/prototype-scriptaculous/... । यह उदाहरण के लिए होगा:var style = document.getElementsByTagName("style")[0];
— VonC
20

Element.insertAdjacentHTML के पास बहुत अच्छा ब्राउज़र समर्थन है, और एक पंक्ति में एक स्टाइलशीट जोड़ सकते हैं।

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
— dangowans
स्रोत
12

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

// 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);
  });
};
— Sandstrom
स्रोत
मैं इसका उपयोग कैसे करूँ
— राज शर्मा
आप वादे (url) .then (फ़ंक्शन () {सामान यहां चला जाता है) करेंगे। वादों पर पढ़ें
— बेन टालियाडोरस
8

मुझे पता है कि यह एक बहुत पुराना धागा है लेकिन यहाँ मेरे 5 सेंट आते हैं।

ऐसा करने का एक और तरीका है जो आपकी आवश्यकताओं के आधार पर है।

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

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

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

— JohanSellberg
स्रोत
7

एक आधुनिक ब्राउज़र में आप promiseइस तरह का उपयोग कर सकते हैं । इसमें एक वादे के साथ लोडर फ़ंक्शन बनाएं:

function LoadCSS( cssURL ) {

    // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css

    return new Promise( function( resolve, reject ) {

        var link = document.createElement( 'link' );

        link.rel  = 'stylesheet';

        link.href = cssURL;

        document.head.appendChild( link );

        link.onload = function() { 

            resolve(); 

            console.log( 'CSS has loaded!' ); 
        };
    } );
}

फिर स्पष्ट रूप से आप सीएसएस लोड होने के बाद कुछ करना चाहते हैं। आप सीएसएस को लोड करने के बाद चलने वाले फ़ंक्शन को कॉल कर सकते हैं:

LoadCSS( 'css/styles.css' ).then( function() {

    console.log( 'Another function is triggered after CSS had been loaded.' );

    return DoAfterCSSHasLoaded();
} );

उपयोगी लिंक यदि आप गहराई से समझना चाहते हैं कि यह कैसे काम करता है:

वादों पर आधिकारिक डॉक्स

वादों के लिए उपयोगी मार्गदर्शक

वादों पर एक बेहतरीन इंट्रो वीडियो

— आर्थर तारासोव
स्रोत
6

इस कोड का उपयोग करें: 

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);
— गौरव त्रिपाठी
स्रोत
4

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

— ez2
स्रोत
4

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

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);
— Lounge9
स्रोत
3

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

यदि आप jquery का उपयोग करते हैं, तो यह प्लगइन एक ही काम करता है।

— anand.trex
स्रोत
2

JS और / या CSS लोड करने के लिए उपयोग करने वाले एक पूर्ण कोड के नीचे

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'])) ();
— हसन ए यूसेफ
स्रोत
1

मैं न केवल सीएसएस बल्कि सभी परिसंपत्तियों (जेएस, सीएसएस, चित्र) को लोड करने के लिए एक और तरीका साझा करना चाहता हूं और फाइलों के गुच्छा के लिए ऑनलोड घटना को संभालता हूं । यह है async-assets-loader। नीचे दिए गए उदाहरण देखें:

<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
      {uri: jsfile, type: "script"},
      {uri: cssfile, type: "style"},
      {uri: imgfile, type: "img"}
    ], function () {
      console.log("Assets are loaded");
      console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
    });
</script>

के अनुसार async-संपत्ति-लोडर डॉक्स

— v.babak
स्रोत
0 
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

मैं thymeleaf का उपयोग कर रहा हूं और यह ठीक है। धन्यवाद

— ekoindra0912
स्रोत
th:hrefक्लाइंट साइड में विशेषता जोड़ने की बात क्या है ? यह Thymeleaf द्वारा संसाधित नहीं किया जाएगा, इसलिए यह यहां बेमानी लगता है।
— स्लावा सेमुशिन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.