从文件加载脚本的最佳方式是什么？

Question

我有，我通过Ajax调用加载一个div的应用程序，或使用jQuery

$('#cont').load("something.html"); 

<div id="cont"> 
</div> 

something.html样子：

<script src="./js/test.js"></script>  
<table> 
    .......blah....blah 
</table> 

我得到： jQuery的1.12.0.min .js：4主线程上的同步XMLHttpRequest已弃用，因为它对最终用户的体验有不利影响。如需更多帮助，请查询https://xhr.spec.whatwg.org/。

我一直在进入test.js文件，只是剪切和粘贴脚本到something.html的开头，但这是很多多余的脚本。许多网页使用它，这成为一个痛苦要维护。

有没有一种方法可以让脚本在单独的.js文件中加载？

Answer 1

当jQuery的插入包含<script>元素HTML，它立即执行脚本。如果它是对外部脚本的引用，它将使用同步AJAX以递归方式加载脚本，以模拟浏览器在加载HTML文件时加载脚本的方式。这会触发警告。

您可以忽略该警告，因为同步AJAX不会很快消失。但如果你真的想摆脱它，你可以将你的负载分成两部分。以加载test.js出something.html线，并使用：

$.getScript('./js/test.js', function() { 
    $("#cont").load('something.html'); 
}); 

Answer 2

试着将其分解为两个操作。在您的网页，与外部JS文件的引用加载使用普通脚本元素的JS脚本：

<script src="./js/test.js"></script> 

然后，做一个AJAX调用来获取内容并加载到AJAX调用的目标DIV成功经理。要做到这一点jQuery的最简单的方法是用$.get()：

<script> 
    $.get('/path/to/something.html', function(data) { 
     // set the contents of #cont to the HTML returned from the AJAX call 
     $('#cont').html(data); 
    }); 
</script> 

Answer 3

如果同步执行是没有必要的脚本，你可以尝试：

<script src="./js/test.js" async="async"></script>  
<table> 
    .......blah....blah 
</table> 

这样做意味着，有没有保证您的脚本将在以下<table>被解析并呈现之前执行。设置async属性表示这可以按任何顺序发生。

HTML5规范是here：

的异步并推迟属性是表明 脚本应该如何执行布尔属性。如果src属性不存在，则不会指定延迟和异步属性 。

使用这些 属性可以选择三种可能的模式。如果异步属性存在，那么脚本将是 异步执行，只要它是可用的。如果async 属性不存在，但存在defer属性，则在页面完成解析后执行 脚本。如果 属性都不存在，则在用户代理继续解析页面之前立即提取并执行脚本 。

Support is pretty good现代浏览器：

• IE 10+
• FF 3。6+
• 铬8+
• 的Safari 5.1+
• 歌剧15+