Question

我有一个脚本，我正在尝试修改，以便我不加载jQuery库，如果它已经存在。但是，我可以使用的唯一方法是下面的示例1（显式加载jQuery库）。当我尝试有条件地加载它时，滑块不起作用......

示例＃1 - 滑块在此示例中正常工作（但jQuery可能会多次加载）

<head>
    <script type='text/javascript' src='scripts/js/jquery-1.4.2.min.js'></script>
    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
    <script type='text/javascript'>
        jQuery(document).ready(
            function(){
                jQuery('#accordion-1').slider({
                    autoStart:true,
                    slideInterval:5000,
                    slideNum:false
                });
            })
    </script>
</head>

示例＃2 - 尝试动态加载jQuery。滑块不起作用。

<head>
    <script type='text/javascript'>
        if (typeof jQuery == 'undefined') {  
            // jQuery is not loaded => load it:
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
            document.getElementsByTagName('body')[0].appendChild(script);
        }
    </script>

    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
    <script type='text/javascript'>
        jQuery(document).ready(
            function(){
                jQuery('#accordion-1').slider({
                    autoStart:true,
                    slideInterval:5000,
                    slideNum:false
                });
            })
    </script>
</head>

示例＃3 - 这不起作用......

<head>
    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {  
            document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E'));
        }
    </script>
    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
</head>

Answer 1

问题在于您将jQuery脚本附加到body的末尾。这是之后使用jQuery的script元素。这显然不起作用，因为脚本是按顺序评估的。

您应该使用document.write代替（在极少数情况下这是正确的）：

document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E'));

unescape代码可以轻松解决</script>如果直接插入Javascript会导致错误这一事实。

此代码在文档的当前位置插入script标记。（归功于this SO answer。）

Answer 2

您必须等待脚本加载。请看下面的代码。

<script type='text/javascript'>
        function initSlider(){
            jQuery(document).ready(
            function(){
                jQuery('#accordion-1').slider({
                    autoStart:true,
                    slideInterval:5000,
                    slideNum:false
                });
            })
        }
        if (typeof jQuery == 'undefined') {  
            // jQuery is not loaded => load it:
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
            script.onreadystatechange= function () {//This is for IE
               if (this.readyState == 'complete'){ initSlider(); };
            }
            script.onload= initSlider;//This is for Non-IE
            document.getElementsByTagName('body')[0].appendChild(script);
        }
    </script>

Answer 3

而是尝试：

    var script = document.createElement("script");

script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js";

document.body.appendChild(script);

Answer 4

document.getElementsByTagName('body')[0].appendChild(script);

在将body元素添加到DOM之前无法工作。试试吧：

    <script type="text/javascript">
        if(!window.jQuery)
            document.write('<script src="jquery.js.php"><\/script>');
    </script>

动态包含jQuery时脚本不起作用

4 个答案: