¿Cómo puedo comprobar si hay un bootstrap.js cargado en la página (se puede compilar un archivo bootstrap.js en otro archivo JS grande)?
Respuestas:
Todo lo que necesita hacer es simplemente verificar si hay un método específico de Bootstrap disponible. Usaré modal en este ejemplo (funciona para Bootstrap 2-4):
// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');
Obviamente, no es 100% confiable ya que una función modal puede ser proporcionada por un complemento diferente, pero no obstante, hará el trabajo ...
También puede verificar Bootstrap 3-4 más específicamente (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');
Tenga en cuenta que todas estas comprobaciones requieren que jQuery ya esté cargado .
.modal
... falsos positivos por todas partes con ese ejemplo.
Prefiero buscar un complemento de arranque específico ya que la información sobre herramientas o modal son muy comunes,
if(typeof($.fn.popover) != 'undefined'){
// your stuff here
}
o
if (typeof $.fn.popover == 'function') {
// your stuff here
}
funciona en ambas versiones de bootstrap
Ver 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>
compatible con el modo seguro de jQuery,
css check puede necesitar ajustes si usa css personalizado
AFAIK, la respuesta corta es
No es posible detectar si twitter bootstrap está cargado
El bootstrap de Twitter es esencialmente CSS y un conjunto de complementos js para jquery. Los nombres de los complementos son genéricos como $ .fn.button y el conjunto de complementos para usar también son personalizables. La presencia de un complemento solo por su nombre no ayudaría a determinar si el bootstrap está presente.
Puede recuperar <script>
elementos y verificar su atributo src, pero como señaló, lo que está buscando es el código en sí y no un nombre de archivo, ya que el código puede estar en cualquier archivo.
La mejor manera de detectar si un servicio / clase / etc. de JavaScript. se carga en una página, es buscar algo en el DOM que sepa que está cargado por el JS dado.
Por ejemplo, para detectar si jQuery está cargado, puede hacerlo null !== window.jQuery
o para averiguar la versión del jQuery cargado,jQuery.prototype.jquery
Encuentro que esta es la forma más fácil de hacerlo. En cuanto a CSS, no estoy seguro de que haya una forma sencilla de hacerlo.
<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
Agregue el enlace de arranque y observe el cambio en la etiqueta h1.