페이지에로드 된 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 속성을 확인할 수 있지만 지적했듯이 코드가 모든 파일에있을 수 있으므로 파일 이름이 아닌 코드 자체를 찾고 있습니다.

JavaScript 서비스 / 클래스 / 등을 감지하는 가장 좋은 방법입니다. 페이지에로드되면 주어진 JS에 의해로드되는 것을 알고있는 DOM에서 무언가를 찾는 것입니다.

예를 들어 jQuery가로드되었는지 감지 null !== window.jQuery하려면로드 된 jQuery의 버전을 확인하거나 찾을 수 있습니다 .jQuery.prototype.jquery

저는 이것이 가장 쉬운 방법이라고 생각합니다. CSS에 관해서는 간단한 방법이 있는지 잘 모르겠습니다.

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

부트 스트랩 링크를 추가하고 h1 태그의 변경 사항을 확인합니다.

콘솔에 입력하면 jQuery 버전이 출력됩니다. console.log(jQuery().jquery);