Jak mogę sprawdzić, czy na stronie jest załadowany plik bootstrap.js (plik bootstrap.js może zostać wkompilowany w inny duży plik JS)?
Odpowiedzi:
Wszystko, co musisz zrobić, to po prostu sprawdzić, czy dostępna jest metoda specyficzna dla Bootstrap. W tym przykładzie użyję modalu (działa dla Bootstrap 2-4):
// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');
Oczywiście nie jest to w 100% niezawodne, ponieważ funkcja modalna może być zapewniana przez inną wtyczkę, ale mimo to wykona zadanie ...
Możesz również sprawdzić dokładniej Bootstrap 3-4 (działa od 3.1+):
// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');
Zauważ, że wszystkie te sprawdzenia wymagają, aby jQuery był już załadowany .
.modal..... Fałszywe pozytywy wszędzie w tym przykładzie.
Wolałbym raczej sprawdzić konkretną wtyczkę bootstrap, ponieważ modalne lub podpowiedzi są bardzo powszechne, więc
if(typeof($.fn.popover) != 'undefined'){
// your stuff here
}
lub
if (typeof $.fn.popover == 'function') {
// your stuff here
}
działa w obu wersjach bootstrap
Zobacz https://github.com/netdna/bootstrap-cdn/issues/111#issuecomment-14467221
<script type="text/javascript">
// <![CDATA[
(function($){
function verifyStyle(selector) {//http://stackoverflow.com/a/983817/579646
var rules;
var haveRule = false;
if (typeof document.styleSheets != "undefined") { //is this supported
var cssSheets = document.styleSheets;
outerloop:
for (var i = 0; i < cssSheets.length; i++) {
//using IE or FireFox/Standards Compliant
rules = (typeof cssSheets[i].cssRules != "undefined") ? cssSheets[i].cssRules : cssSheets[i].rules;
for (var j = 0; j < rules.length; j++) {
if (rules[j].selectorText == selector) {
haveRule = true;
break outerloop;
}
}//innerloop
}//outer loop
}//endif
return haveRule;
}//eof
<!-- BOOTSTRAP JS WITH LOCAL FALLBACK-->
if(typeof($.fn.modal) === 'undefined') {document.write('<script src="<?=$path_js?>/bootstrap.min.js"><\/script>')}
<!-- BOOTSTRAP CDN FALLBACK CSS-->
$(document).ready(function() {
if( verifyStyle('form-inline') )
{
$("head").prepend("<link rel='stylesheet' href='<?=$path_css?>bootstrap.min.css' type='text/css' media='screen'>");
}
else
{
//alert('bootstrap already loaded');
}
});
})(jQuery);
// ]]>
</script>
kompatybilny z trybem awaryjnym jQuery,
css może wymagać poprawek, jeśli używasz niestandardowego css
AFAIK, krótka odpowiedź brzmi
Nie jest możliwe wykrycie, czy załadowano bootstrap Twittera
Program ładujący na Twitterze to w zasadzie css i zestaw wtyczek js do jquery. Nazwy wtyczek są ogólne, takie jak $ .fn.button, a zestaw wtyczek do użycia również można dostosować. Obecność wtyczki tylko z nazwy nie pomogłaby w stwierdzeniu, że bootstrap jest obecny.
Możesz pobrać <script>elementy i sprawdzić ich atrybut src, ale jak zauważyłeś, szukasz samego kodu, a nie nazwy pliku, ponieważ kod może znajdować się w dowolnym pliku.
Najlepszy sposób na wykrycie, czy usługa / klasa / etc JavaScript. jest ładowany na stronie, polega na wyszukaniu czegoś w DOM, o czym wiesz, że jest ładowane przez dany JS.
Np. Aby wykryć, czy jQuery jest załadowane, możesz to zrobić null !== window.jQuerylub znaleźć wersję załadowanego jQuery,jQuery.prototype.jquery
Uważam, że jest to najłatwiejszy sposób na zrobienie tego. Jeśli chodzi o css, nie jestem pewien, czy istnieje prosty sposób na zrobienie tego.
<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
Dodaj link bootstrap i zwróć uwagę na zmianę w tagu h1.