मैं वेबकिट (सफारी/क्रोम) में गतिशील रूप से सीएसएस नियम कैसे लोड करूं?

Question

मुझे वर्तमान में वेबकिट (सफारी और क्रोम) में समस्याएं हैं, मैं गतिशील रूप से (आंतरिक HTML) को कुछ एचटीएमएल को एक div में लोड करने का प्रयास करता हूं, एचटीएमएल में सीएसएस नियम (...) होते हैं, एचटीएमएल प्रस्तुत करने के बाद स्टाइल परिभाषाएं लोड नहीं होती हैं (इसलिए दृष्टि से मैं शैलियों को बता सकता हूं कि वहां नहीं हैं और यदि मैं उनके लिए जावास्क्रिप्ट खोजता हूं तो कोई शैलियों नहीं मिलती हैं)। मैंने jquery प्लगइन tocssRule() का उपयोग करने का प्रयास किया है, यह काम करता है लेकिन यह बहुत धीमा है। शैलियों को गतिशील रूप से लोड करने के लिए वेबकिट प्राप्त करने का कोई और तरीका है? धन्यवाद। पैट्रिक

Answer 1

मुझे लगता है कि यह आपके दस्तावेज़ के प्रमुख को "लिंक" टैग जोड़ने का बेहतर अभ्यास है। यदि यह संभव नहीं है, तो सिर पर "शैली" टैग जोड़ने का प्रयास करें। स्टाइल टैग शरीर में नहीं होना चाहिए (यहां तक ​​कि मान्य भी नहीं है)।

संलग्न लिंक टैग:

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

link.setAttribute('rel', 'stylesheet'); 

link.type = 'text/css'; 

link.href = 'http://example.com/stylesheet.css'; 

document.head.appendChild(link); 

संलग्न शैली टैग:

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

style.innerHTML = 'body { background-color: #F00; }'; 

document.head.appendChild(style); 

Answer 2

धन्यवाद Vatos, आप मुझे एक अच्छा बढ़त दिला दी, मूल रूप से मैं तुम्हें क्या सुझाव दिया लेकिन jQuery इस्तेमाल किया एचटीएमएल स्थापित करने के लिए किया था और जब से आंतरिक HTML और document.head को अपरिभाषित किया गया था, तब से सफारी/क्रोम रुक जाएगा, तब से नई शैली को सिर में जोड़ दें। मेरे कोड इस

var cssDefinitions = '..my style chunk goes here'; 
var style = document.createElement('style');' 
$(style).html(cssDefinitions); 
$('head').append(style);

Answer 3

की तरह लग रही समाप्त यहाँ गिग है। पैट्रिक ने क्या कहा मेरे लिए काम नहीं किया। यहां मैंने यह कैसे किया है।

var ref = document.createElement('style'); 
ref.setAttribute("rel", "stylesheet"); 
ref.setAttribute("type", "text/css"); 
document.getElementsByTagName("head")[0].appendChild(ref); 
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie 
else ref.appendChild(document.createTextNode(asd)); 

आंतरिक HTML को बहिष्कृत किया गया है और इस तरह के किसी चीज़ के लिए उपयोग नहीं किया जाना चाहिए। इसके अलावा यह भी धीमा है।

var cssLink = $('<link />'); 
cssLink.attr("rel","stylesheet") 
cssLink.attr("type", "text/css"); 
cssLink.attr("href","url/to.css"); 

आप इसे उस तरह से तो यह सफारी में काम करेंगे करते हैं:

Answer 4

सबसे आसान तरीका है (jQuery है कि प्रयोग करके) निम्नलिखित है। यदि आप इसे सामान्य jQuery तरीका (सभी एक पाठ स्ट्रिंग में) करते हैं तो यह असफल हो जाएगा (सीएसएस लोड नहीं होगा)।

फिर आप इसे $ ('head') के साथ सिर में जोड़ दें। संलग्न करें (सीएसएसलिंक);

Answer 5

सीधे-अप jQuery रास्ता (है कि प्रमुख ब्राउज़रों पर काम करता है - क्रोम सहित): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

साइट से:

$("head").append("<link />"); 
var CSS = $("head").children(":last"); 
CSS.attr({ 
"rel": "stylesheet", 
"type": "text/css", 
"href": "url/to.css" 
}); 

नोट: उदाहरण भी जे एस के इंजेक्शन भी शामिल है, जो अनदेखा किया जा सकता अगर आप सिर्फ एक सीएसएस संदर्भ इंजेक्ट करना चाहते हैं।

Answer 6

मेह। मेरे पास आंद्रेई सिम्पोका के नतीजे को वोट देने के लिए पर्याप्त अंक नहीं हैं, लेकिन यह समाधान यहां सबसे अच्छा है।

style.innerHTML = "..."; वेबकिट इंजन या यानी काम नहीं करता है।

सही ढंग से सीएसएस पाठ इंजेक्षन करने के लिए, आपको:

style.styleSheet.cssText = "..."; यानी के लिए।

और

style.appendChild (दस्तावेज़।createTextNode ("...")); वेबकिट के लिए

फ़ायरफ़ॉक्स दूसरे विकल्प के साथ या style.innerHTML = "..." के साथ भी काम करेगा;

Answer 7

शैली टैग आधारित संस्करणों उपरोक्त के अलावा, आप भी शैलियों सीधे जावास्क्रिप्ट का उपयोग कर जोड़ सकते हैं:

var style = document.getElementById('some-style-tag'); 
var sheet = style.sheet; 
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length); 

यह cssText/innerHTML का सहारा के बिना चर का उपयोग करने में सक्षम होने का लाभ है।

ध्यान रखें कि वेबकिट आधारित ब्राउज़र पर यह बहुत धीमा हो सकता है यदि आप बहुत सारे नियम डाल रहे हैं। वेबकिट (https://bugs.webkit.org/show_bug.cgi?id=36303) में इस प्रदर्शन समस्या को ठीक करने के लिए एक बग खुला है। तब तक, आप थोक आवेषण के लिए स्टाइल टैग का उपयोग कर सकते हैं।

इस शैली नियमों डालने के W3C मानक तरीका है, लेकिन यह IE के किसी भी संस्करण द्वारा समर्थित नहीं है: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

मैं जानता हूँ कि यह एक पुराने विषय है, लेकिन सोचा था कि किसी को लाभ होगा। (सब कुछ शामिल "घटक" टेम्पलेट्स के अनुसार प्रदान की गई ऑनलोड, पहले) मैं भी सीएसएस मेरा पेज में गतिशील रूप से लोड करने के लिए की जरूरत:

var oStyle = $("<style />"); 

oStyle.append("@import url(" + sTemplateCssUrl + ");"); 
oStyle.attr("type", "text/css"); 

$(document.head).append(oStyle); 

मैं एक पंक्ति दृष्टिकोण के साथ document.head को जोड़कर की कोशिश की - IE में काम किया 10 और क्रोम, लेकिन सफारी में नहीं। उपरोक्त दृष्टिकोण सभी में काम किया 3.