jQuery.getScript可以将该文件显示为Chrome Developer Tools中的资源吗？ [英] Can jQuery.getScript show the file as a resource in Chrome Developer Tools?

问题描述

我的代码需要按需加载脚本。

My code needs to load scripts on demand.

function includeJS(uri) {
    return jQuery.getScript(uri);
}

includeJS('/path/to/script.js').always(function() {
    // do something after script is loaded
});

但问题是，JS文件将不会像其他Chrome浏览器工具一样可用页面上静态包含的文件。由于这个原因，我不能轻易放置断点。

The problem, though, is that the JS file will not be available in the Chrome Developer tools like other files that were included statically on the page. Due to this I cannot easily put break points.

是否还有jQuery.getScript的替代方案，它还会在Chrome开发者工具中显示该脚本并具有断开的功能积分？

Is there an alternative to jQuery.getScript that will also show the script in the Chrome Developer tools with the ability to put break points?

编辑：根据当前接受的答案添加解决方案（我仍会考虑其他解决方案，但这似乎有效对我来说）

Adding solution based on currently accepted answer (I will still consider other solutions, but this seems to work for me)

function includeJS(uri) {
    var def = $.Deferred();
    var script = document.createElement('script');
    script.src = uri;
    script.onload = function() {
        def.resolve();
    }
    script.onerror = function() {
        def.reject();
    }
    document.body.appendChild(script);
    return def.promise();
}

推荐答案

你可以简单地追加一个 script 标记，并使用 onload 处理程序来执行加载后操作。示例： https://jsfiddle.net/0nu2dusu/

You can simply append a script tag, and use an onload handler to execute post-load actions. Example: https://jsfiddle.net/0nu2dusu/

var script = document.createElement('script');
script.src = 'my_external_script.js';
script.onload = loadHandler;
document.body.appendChild(script);

您对失败的加载的控制力略低于 $。getScript offer，但脚本确实显示在开发工具中。

You have slightly less control over failed loads than $.getScript offers, but the script does show up in dev tools.

这篇关于jQuery.getScript可以将该文件显示为Chrome Developer Tools中的资源吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！