230

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

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

2009-02-22 Click Upvote

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

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) का फ्लैश दिखाई देगा।

स्रोत

2009-02-23 09:25:35

सीएसएस फ़ाइल लोड होने के बाद कॉलबैक चलाने के बारे में क्या? – jchook

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

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

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

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

स्रोत

2009-02-22 13:56:26 VonC

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

इस प्रतिक्रिया के लिए धन्यवाद – VonC

बिल्कुल निश्चित नहीं है कि किस मामले में, लेकिन कुछ मामलों में, 'document.write' isn' टी की सिफारिश की क्योंकि यह खत्म हो गया आपकी वेबसाइट के पूरे शरीर को लिखता है। –

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

स्रोत

2009-02-22 13:59:34 zihotki

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

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

स्रोत

2009-02-22 14:04:31

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

स्रोत

2010-12-12 12:01:58 ez2

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

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

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

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

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

स्रोत

2012-01-25 08:04:50 Swippen

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

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 तर्क के रूप में पास करें।

स्रोत

2012-05-10 11:22:29 Talha

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

स्रोत

2014-10-21 04:45:23 ekoindra0912

यहाँ 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']))();

स्रोत

2014-10-22 18:18:32 Lounge9

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

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

स्रोत

2015-10-28 09:13:53 BoumTAC

और धन्यवाद

स्रोत

2016-09-06 12:08: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); 
    }); 
};

स्रोत

2016-12-02 14:01:30 sandstrom

मैं इसका उपयोग कैसे करूं –

उपयोग इस कोड:

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

स्रोत

2017-09-27 04:17:58

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

उत्तर

VanillaJS

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