javascript - 动态加载jquery

Question

我正在使用以下脚本在头部加载 jquery，以防 if 尚未加载。

<script type="text/javascript">
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
   document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<script type="text/javascript">


$(document).ready(function() {
        $("#nav li:has(ul)").hover(function(){
            $(this).find("ul").slideDown();
        }, function(){
            $(this).find("ul").hide();
        });
    });
</script>

<style>
#nav {position: fixed; white-space:nowrap;}
#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;list-style: none;}
#nav li a { width:220px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:90%; border:1px solid #ccc;text-transform: uppercase;font-weight: bold; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0;width: 178px; }
* html li li { display:inline; } /* IE6 Bugfix... */
</style>

但它没有出现在头部。

Answer 1

根据您的评论“$未定义”，这表明您的 jQuery 后备在该过程中加载得太晚。正如 SLAks 所指出的，你的后备是异步运行的。

尝试使用 document.write() 将脚本 block 插入头部。这将强制浏览器在继续执行之前评估脚本。

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