Rumah > Artikel > hujung hadapan web > Tentukan secara automatik sama ada untuk menambah fail css atau js ke halaman selepas css dimuatkan_jquery
Saya sedang menulis rangka kerja projek dan menulis kelas JQueryMessageBox untuk menggunakan dialog() dalam jquery ui untuk memaparkan kotak mesej Untuk memudahkan kaedah dipanggil, saya telah menambah pertimbangan automatik sama ada halaman itu telah ditambahkan ui.js dan ui .css, kodnya adalah seperti berikut:
//如果没有包含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 }}
Tetapi kod CSS tidak akan dimuatkan serta-merta, jadi tidak akan ada gaya apabila dialog dipaparkan (ini OK di bawah IE9, kerana di bawah IE9, walaupun CSS dimuat turun kemudian, elemen halaman akan dilukis semula, manakala IE8 tidak Ya). Untuk menyelesaikan masalah ini, anda boleh menggunakan ajax Selepas css dimuatkan, dialog akan dipaparkan, supaya ia boleh dipaparkan dengan gaya seperti berikut:
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; }