Question

我知道我的主题非常棘手，但我不知道如何在这个主题上更加精心地阐述它。所以这里是怎么回事。我有一个按钮

<a href="#" onClick="loadtheFile()">Load IT!</a>

脚本标签上的

：

function loadTheFile() {
var script = $("<script><\/script>");
script.attr("type", "text/javascript");
script.attr('src','http://www.thisismyexternalloadingjsfile"');
$('body').append(script);
alert("done! the file has been loaded");
}

脚本很好，加载时会自动有一个模态框。但问题是，我的警报似乎先于脚本

启动

那么我怎么知道我是否已经完成加载脚本？

更新第一次回答：

function loadTheFile() {
    var script = $("<script><\/script>");
    script.attr("type", "text/javascript");
    script.attr('src','http://www.thisismyexternalloadingjsfile"');
    $('body').append(script);
    $(document).ready(function() {
      alert("done! the file has been loaded")};
    }

同样的问题

Answer 1

alert确实在加载脚本之前运行。将script标记附加到页面的所有操作都会将script标记附加到页面。然后浏览器必须下载脚本，一旦收到，就运行它。在您的loadTheFile函数退出之后。

因此，您需要在实际加载并运行脚本时获得回调。这比以前更加标准，但仍然存在一些跨浏览器的麻烦。幸运的是，jQuery已经为你解决了这个问题（因为你已经使用了jQuery）：

function loadTheFile() { $.getScript('http://www.thisismyexternalloadingjsfile"') .then(function() { alert("done! the file has been loaded"); }); }

重新评论：

但我的脚本文件有data- * attributes

假设您正在讨论data-* 标记上的script属性，那么您将需要做更多的工作，但它仍然相当直接：< / p>
function loadTheFile() { var load = $.Deferred(); var script = document.createElement('script'); script.src = 'http://www.thisismyexternalloadingjsfile"'; // No need for `type`, JavaScript is the default script.setAttribute("data-foo", "bar"); script.onreadystatechange = function() { if (script.readyState === "loaded") { load.resolve(); } }; script.onload = function() { load.resolve(); }; load.then(function() { alert("done! the file has been loaded"); }); document.body.appendChild(script); ;// Or wherever you want to put it }

onreadystatechange位用于处理旧版本的IE。

Answer 2

不要使用text和jQuery伪造脚本，只需使用原生Javascript：

var s = document.createElement('script');
s.onload = scriptLoaded;
s.src = '/path/to/my.js';
document.body.appendChild(s);

function scriptLoaded() {
    console.log('Script is loaded');
}

Answer 3

尝试以下几点：

您的主页：

function whenScriptIsReady(){
  alert('This function is called when the other script is loaded in!')
}
function loadTheFile() {
  var script = $("<script><\/script>");
  script.attr("type", "text/javascript");
  script.attr('src','myotherjs.js');
  $('body').append(script);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="loadtheFile()">Load IT!</a>

myotherjs.js：

alert('This will automatically run when the JS is loaded in!');
whenScriptIsReady();

Answer 4

JavaScript是异步执行的，因此在浏览器加载新脚本之前，您将执行alert。如果要在加载脚本后执行逻辑，可以向script添加一个事件监听器，一旦脚本加载完成，它将调用函数'loadFunc`：

var loadFunc = function() {
  alert("External Javascript File has been loaded");
};

//Other browsers trigger this one
if (script.addEventListener)
  script.addEventListener('load', loadFunc, false);

如何知道javascript已加载的javascript是否已被加载

4 个答案: