Question

我尝试动态加载一些js文件，例如：

function openInforWindow(){
  //check if the InforWinow.js has been loaded or not
  if(window.InforWindow){
    //do the right thing
  }
  else {
    loadJs('xxxxxx/InforWindow.js');
    // do the right thing
    //but here ,the infowindow is not definded yet.
  }
}

function loadJs(filename){
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
  if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

如何确保动态加载的js中的vars或函数可以添加到javascript执行环境中，以便我可以使用它们？

Answer 1

添加脚本元素不是阻塞操作，这意味着当外部脚本甚至没有加载（也没有解释）时，你的loadJs方法会立即返回。你必须等待它加载。

function openInforWindow(){
  //check if the InforWinow.js has been loaded or not
  if(window.InforWindow){
    //do the right thing
  }
  else {
    var loadHandler = function() {
       //do stuff with inforWindow 
    };

    loadJs('xxxxxx/InforWindow.js', loadHandler);

  }
}

function loadJs(filename, handler){
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "js");
  fileref.onreadystatechange = function () {
    if (this.readyState == 'complete')handler();
  };
  fileref.onload = handler;
  if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref);
}

Answer 2

您可以在文档中动态插入<script/>标记，这是一个可以在firefox / chrome中运行的脚本，您可能需要在IE中进行一些调整：

loadJs = function(src) {
  var script = document.createElement('SCRIPT');
  script.setAttribute('src', src);
  document.getElementsByTagName('HEAD')[0].appendChild(script);
}

然后等待document.onload事件触发，您的window.InforWindow应该在该阶段加载。

document.addEventListener('load', function () {
   // Your logic that uses window.InforWindow goes here
}, false);

请注意，IE对加载事件侦听器的执行略有不同：

document.attachEvent('onload', function() {
   // Your logic that uses window.InforWindow goes here
});

Answer 3

一种方法是使用jQuery的AJAX加载器加载脚本。示例如下：

function loadJs(filename, functionToCall){
   $.getScript(filename, functionToCall);
}

现在，您只需要调用loadJs("script.js", callback);，它将首先完全加载script.js，然后运行callback（）。

如何动态加载JavaScript

3 个答案: