Twitter 부트 스트랩이로드되었는지 확인하는 방법은 무엇입니까?

Twitter 부트 스트랩이로드되었는지 확인하는 방법은 무엇입니까?

---

페이지에로드 된 bootstrap.js가 있는지 어떻게 확인할 수 있습니까 (bootstrap.js 파일은 다른 큰 JS 파일로 컴파일 될 수 있음)?

---

필요한 것은 부트 스트랩 관련 방법을 사용할 수 있는지 확인하는 것뿐입니다. 이 예제에서는 모달을 사용하겠습니다 (Bootstrap 2-4에서 작동).

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

모달 함수가 다른 플러그인에서 제공 될 수 있기 때문에 분명히 100 % 신뢰할 수있는 것은 아니지만 그럼에도 불구하고 작업을 수행 할 것입니다 ...

Bootstrap 3-4를 더 구체적으로 확인할 수도 있습니다 (3.1 이상에서 작동).

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

이러한 모든 검사를 수행하려면 jQuery가 이미로드되어 있어야합니다 .

---

모달 또는 툴팁이 매우 일반적이므로 특정 부트 스트랩 플러그인을 확인하고 싶습니다.

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

또는

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

두 부트 스트랩 버전에서 작동

---

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

여기서 [?]는 JS 파일 자체 내에 정의 된 모든 객체 또는 네임 스페이스입니다.

"포함"의 개념은 자바 스크립트에 존재하지 않습니다.

---

참조 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>

jQuery 안전 모드와 호환

사용자 지정 CSS를 사용하는 경우 CSS 검사에 조정이 필요할 수 있습니다.

---

AFAIK, 짧은 대답은

트위터 부트 스트랩이로드되었는지 여부를 감지 할 수 없습니다.

세부

Twitter 부트 스트랩은 본질적으로 CSS이며 jquery에 대한 js 플러그인 세트입니다. 플러그인 이름은 $ .fn.button과 같이 일반적이며 사용할 플러그인 세트도 사용자 정의 할 수 있습니다. 이름 만있는 플러그인의 존재는 부트 스트랩이 있는지 확인하는 데 도움이되지 않습니다.

---

<script>요소 를 검색 하고 해당 src 속성을 확인할 수 있지만 지적했듯이 코드가 모든 파일에있을 수 있으므로 파일 이름이 아닌 코드 자체를 찾고 있습니다.

The best way to detect if a JavaScript service/class/etc. is loaded in a page, is to look for something in the DOM that you know is loaded by the given JS.

E.g. to detect if jQuery is loaded, you can do null !== window.jQuery or to find out the version of the loaded jQuery, jQuery.prototype.jquery

---

I find this the easiest way of doing it. As far as css i am not sure there is a simple way of doing that.

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

---

Add the bootstrap link and notice the change in h1 tag.

---

If you type this in the console, it will output the jQuery version: console.log(jQuery().jquery);

참고URL : https://stackoverflow.com/questions/13933000/how-to-check-if-twitter-bootstrap-is-loaded