Question

我有一个应用程序，我通过ajax调用或jquery

加载div

$('#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：

async 和defer属性是指示的布尔属性   如何执行脚本。延迟和异步属性必须   如果src属性不存在，则不指定。

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

现代浏览器的

Support is pretty good：

IE 10 +
FF 3.6 +
Chrome 8 +
Safari 5.1 +
Opera 15 +

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

3 个答案: