web-dev-qa-db-fra.com

Comment vérifier si Twitter bootstrap est chargé?

Comment puis-je vérifier si un fichier bootstrap.js est chargé sur la page (un fichier bootstrap.js peut être compilé dans un autre gros fichier JS)?

javascripttwitter-bootstrap
67
Igor T.

Tout ce que vous avez à faire est simplement de vérifier si une méthode spécifique à Bootstrap est disponible. Je vais utiliser modal dans cet exemple (fonctionne pour Bootstrap 2-4):

// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');

Ce n’est évidemment pas fiable à 100% puisqu’une fonction modale peut être fournie par un plugin différent, mais néanmoins, elle fera l'affaire ...

Vous pouvez également rechercher Bootstrap 3-4 plus spécifiquement (fonctionne à partir de la version 3.1+):

// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');

Notez que toutes ces vérifications nécessitent que jQuery soit déjà chargé .

105
Aron

Je préférerais vérifier le plug-in de démarrage spécifique, car les modaux ou les info-bulles sont très courants 

if(typeof($.fn.popover) != 'undefined'){
 // your stuff here
}

ou 

 if (typeof $.fn.popover == 'function') { 
   // your stuff here
  }

fonctionne dans les deux versions d'amorçage

21
Benn

Voir 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 avec le mode sans échec jQuery, 

vérification css peut-être besoin d'ajustements si vous utilisez css personnalisé

5
max4ever

if (typeof([?])=='undefined') { /*bootstrap is not loaded */}

où [?] serait un objet ou un espace de noms défini dans le fichier JS lui-même.

Le concept "d'inclusion" n'existe pas en javascript.

5
Alex

Autant que je sache, la réponse courte est

Il n'est pas possible de détecter si le bootstrap de Twitter est chargé.

Détails

Twitter bootstrap est essentiellement css et un ensemble de plugins js à jquery. Les noms de plugins sont génériques, comme $ .fn.button et un ensemble de plugins à utiliser est également personnalisable. La présence d'un plugin simplement par son nom ne permettrait pas de s'assurer de la présence du bootstrap.

4
closure

Vous pouvez récupérer des éléments <script> et vérifier leur attribut src, mais comme vous l'avez indiqué, vous recherchez le code lui-même et non un nom de fichier, car ce code peut figurer dans n'importe quel fichier. 

La meilleure façon de détecter si un service/classe JavaScript/etc. est chargé dans une page, est de chercher quelque chose dans le DOM que vous savez est chargé par le JS donné.

Par exemple. pour détecter si jQuery est chargé, vous pouvez faire null !== window.jQuery ou pour connaître la version du jQuery chargé, jQuery.prototype.jquery

2
marekful

Je trouve cela le moyen le plus simple de le faire. En ce qui concerne css, je ne suis pas sûr qu'il existe un moyen simple de le faire.

<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
0
Amplifier