Como posso verificar se há um bootstrap.js carregado na página (um arquivo bootstrap.js pode ser compilado em outro arquivo JS grande)?
Respostas:
Tudo que você precisa fazer é simplesmente verificar se um método específico do Bootstrap está disponível. Vou usar modal neste exemplo (funciona para Bootstrap 2-4):
// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');
Obviamente, não é 100% confiável, pois uma função modal pode ser fornecida por um plug-in diferente, mas ainda assim fará o trabalho ...
Você também pode verificar o Bootstrap 3-4 mais especificamente (funciona a partir de 3.1+):
// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');
Observe que todas essas verificações exigem que o jQuery já esteja carregado .
.modal..... Falsos positivos em todo lugar com esse exemplo.
Eu prefiro verificar o plug-in de bootstrap específico, pois modal ou dica de ferramenta são muito comuns, então
if(typeof($.fn.popover) != 'undefined'){
// your stuff here
}
ou
if (typeof $.fn.popover == 'function') {
// your stuff here
}
funciona em ambas as versões de bootstrap
if (typeof([?])=='undefined') { /*bootstrap is not loaded */}
onde [?] seria qualquer objeto ou namespace definido dentro do próprio arquivo JS.
O conceito de "incluir" não existe em javascript.
if(typeof($.fn.modal) === 'undefined')
Consulte 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>
compatível com o modo de segurança jQuery,
A verificação de css pode precisar de ajustes se você usar css personalizado
AFAIK, a resposta curta é
Não é possível detectar se o bootstrap do Twitter está carregado
O bootstrap do Twitter é essencialmente css e um conjunto de plug-ins js para jquery. Os nomes de plug-ins são genéricos como $ .fn.button e o conjunto de plug-ins a serem usados também é personalizável. A presença do plugin apenas pelo nome não ajudaria a determinar se o bootstrap está presente.
Você pode recuperar <script>elementos e verificar seu atributo src, mas como você apontou, o que você está procurando é o próprio código e não um nome de arquivo, pois o código pode estar em qualquer arquivo.
A melhor maneira de detectar se um serviço / classe / etc do JavaScript. é carregado em uma página, é procurar algo no DOM que você sabe que foi carregado pelo JS fornecido.
Por exemplo, para detectar se o jQuery está carregado, você pode fazer null !== window.jQueryou descobrir a versão do jQuery carregado,jQuery.prototype.jquery
Acho que essa é a maneira mais fácil de fazer isso. Quanto ao css, não sei se há uma maneira simples de fazer isso.
<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
Adicione o link de bootstrap e observe a mudança na tag h1.