Heim >Web-Frontend >js-Tutorial >Bestimmen Sie automatisch, ob CSS- oder JS-Dateien zur Seite hinzugefügt werden sollen, nachdem CSS geladen wurde_jquery
Ich schreibe gerade das Projekt-Framework und schreibe eine JQueryMessageBox-Klasse, um die Dialog() in der JQuery-Benutzeroberfläche zum Anzeigen des Meldungsfelds zu verwenden. Um den Aufruf der Methode zu vereinfachen, habe ich eine automatische Beurteilung hinzugefügt, ob die Seite hinzugefügt wurde ui.js und ui .css, der Code lautet wie folgt:
//如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js/jquery-ui-1.8.11.custom.min.js' type='text/javascript' />"").appendTo('head'); }} //如果没有加载css,则加载 if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{ $('<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo('head'); //dialog() script }}
Der CSS-Code wird jedoch nicht sofort geladen, sodass beim Anzeigen des Dialogfelds kein Stil angezeigt wird (dies ist unter IE9 in Ordnung, da unter IE9 die Seitenelemente neu gezeichnet werden, selbst wenn das CSS später heruntergeladen wird). (während IE8 dies nicht tut). Um dieses Problem zu lösen, können Sie Ajax verwenden. Nachdem das CSS geladen wurde, wird der Code wie folgt angezeigt
if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) { $.ajax({ url: '/css/jquery-ui-1.8.14.custom.css', success: function(data) { //创建一个style元素,并追加到head中 //替换其中images的路径 $('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head'); //dialog() script; } }); } else { //dialog() script; }