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




شرح المتصفح (12)

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

أنا أستخدم thymeleaf وهذا هو العمل بشكل جيد. شكر

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

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


اتصل بالوظيفة التالية لتحميل ملف 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 .



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

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

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

هناك ملحق jquery عام يقوم بتحميل css و JS files synch و asych عند الطلب. كما أنه يقوم بتعقب ما تم تحميله بالفعل :) انظر: http://code.google.com/p/rloader/


أعلم أن هذا خيط قديم جدا ولكن هنا يأتي 5 سنتات.

هناك طريقة أخرى للقيام بذلك اعتمادا على ما هي احتياجاتك.

لدي حالة أريد فيها أن يكون ملف css نشطًا لفترة قصيرة فقط. مثل تبديل CSS. قم بتنشيط css ثم بعد حدث آخر قم بتثبيته.

بدلاً من تحميل css بشكل ديناميكي ثم إزالته ، يمكنك إضافة فئة / معرّف أمام جميع العناصر في css الجديد ، ثم قم فقط بتبديل تلك الفئة / المعرّف للعقدة الأساسية لـ css الخاص بك (مثل علامة النص).

ستحتاج مع هذا الحل إلى تحميل المزيد من ملفات css أولاً ولكن لديك طريقة أكثر ديناميكية لتحويل تخطيطات css.


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

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

إذا كنت تستخدم jquery:

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

وإليك طريقة باستخدام طريقة إنشاء عنصر 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);


هذا يعمل مع jQuery:

$(window).attr("location", "http://google.fr");






javascript html css dhtml