[javascript] كيفية تحميل ملفات CSS باستخدام جافا سكريبت؟


5 Answers

أعتقد أن شيئًا مثل هذا البرنامج النصي سيفعل:

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

يحتوي ملف JS هذا على العبارة التالية:

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

يجب أن يكون عنوان javascript و css مطلقًا إذا كان يريد الرجوع إلى موقعك.

تتم مناقشة العديد من تقنيات استيراد CSS في مقالة "قل لا إلى CSS باستخدام تقنيات متفرعة" .

ولكن يشير استخدام "استخدام جافا سكريبت إلى إضافة صفحات الأنماط الخاصة بـ Portlet CSS بشكل ديناميكي" أيضًا إلى إمكانية CreateStyleSheet (طريقة خاصة بـ 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);
}
//]]>
Question

هل من الممكن استيراد أوراق أنماط css إلى صفحة html باستخدام جافا سكريبت؟ إذا كان الأمر كذلك، كيف يمكن أن يتم ذلك؟

ملاحظة: ستتم استضافة جافا سكريبت على موقعي ، ولكن أريد أن يتمكن المستخدمون من وضع علامة <head> على موقعهم على الويب ، ويجب أن يتمكنوا من استيراد ملف css مستضافًا على الخادم الخاص بي إلى صفحة الويب الحالية. (سيتم استضافة كل من ملف css وملف javascript على الخادم الخاص بي).




وإليك طريقة باستخدام طريقة إنشاء عنصر jQuery (تفضيلاتي) ومع معاودة الاتصال:

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



إذا كنت تريد أن تعرف (أو الانتظار) حتى يقوم النمط نفسه بتحميل هذه الأعمال:

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



استخدم هذا الكود:

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



اتصل بالوظيفة التالية لتحميل ملف CSS أو JavaScript بشكل ديناميكي.

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 .




أسفل رمز كامل يستخدم لتحميل 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'])) ();



Related