将jQuery加载到头部
[英]Loading jQuery into the head
问题描述
I'm trying to dynamically load some jQuery libraries into the document head. 
我正在尝试将一些jQuery库动态加载到文档头中。
<head>
<script src="../js/jQuery.js"></script>
<script src="../js/App.js"></script>
</head>
jQuery.js looks like this: jQuery.js看起来像这样：
(function() {
/*
* load all jQuery components
*
* @private
*/
var head = document.getElementsByTagName('head')[0];
var components = [];
var jQuery = document.createElement('script');
jQuery.type = 'text/javascript';
jQuery.src = 'http://' + location.host + '/js/jquery-1.8.2.min.js';
components.push(jQuery);
var jQueryMobile = document.createElement('script');
jQueryMobile.type = 'text/javascript';
jQueryMobile.src = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js';
components.push(jQueryMobile);
var jQueryMobileCSS = document.createElement('link');
jQueryMobileCSS.type = 'text/css';
jQueryMobileCSS.href = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css';
components.push(jQueryMobileCSS);
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, initial-scale=1';
components.push(meta);
components.forEach( function( component ) {
head.appendChild( component );
});
// EDIT - FIX:
var App = document.createElement('script');
jQueryMobile.type = 'text/javascript';
jQueryMobile.src = 'http://' + location.host + '/js/App.js';
jQuery.onload = function() {
head.appendChild(App);
};
})();
The console.log shows that the head object contains the script tags loading the jQuery libraries. console.log显示head对象包含加载jQuery库的脚本标签。 App.js requires jQuery but is throwing an error stating that jQuery is not defined. App.js需要jQuery，但会引发错误，指出未定义jQuery。 What am I missing? 我想念什么？
3 个解决方案
解决方案1
2 已采纳 2013-05-02 13:45:18
App.js is trying to execute before the dependencies are completely loaded. App.js试图在完全加载依赖项之前执行。 You should add a callback function inside the jQuery.js file that will load App.js AFTER the other libraries have loaded. 您应该在jQuery.js文件中添加一个回调函数，该函数将在其他库加载后加载App.js。
解决方案2
0 2013-05-02 14:00:41
Your App.js is loading faster than your jQuery library and so it cannot find jQuery. 您的App.js加载速度比jQuery库快，因此找不到jQuery。 You should just indcude your JS at the bottom of your HTML before the closing </body> tag instead of creating these elements dynamically in the head, eg: 您应该在</body>标记之前在HTML的底部添加JS，而不是在头部动态创建这些元素，例如：
<script src="http://hostexample.com/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="../js/App.js"></script>
</body>
This will ensure that jQuery is loaded before you use it. 这将确保在使用jQuery之前先将其加载。
Check this link out: JavaScript - How do I make sure a jQuery is loaded? 检查此链接： JavaScript-如何确保已加载jQuery？ . 。
It offers both an explanation as to why you should do it the way I have suggested and a (nasty) solution to the way you have done it if you still choose to do it like this. 它既提供了有关您为什么应该按照我建议的方式进行操作的解释，也提供了如果您仍然选择这样做的话（一种令人讨厌的）解决方案。
解决方案3
-1 2013-05-02 13:57:23
That's because you add the jQuery script tag at the end of the header, after you app.js. 这是因为在app.js之后，您在标题的末尾添加了jQuery脚本标签。 So your html look like 所以你的HTML看起来像
If app.js need jquery, it is loaded befor jQuery, so it cant find what it need. 如果app.js需要jquery，则会在jQuery之前加载它，因此它找不到所需的东西。
Instead of head.appendChild( component ); 代替head.appendChild( component ); try : 尝试：
head.insertBefore(component, head.getElementsByTagName('script')[head.getElementsByTagName('script').length - 1])
Something like that should work. 这样的事情应该起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.