使用 Prototype 动态加载 js 文件？答案

【问题标题】：Dynamically loading a js file using Prototype?使用 Prototype 动态加载 js 文件？
【发布时间】：2010-10-17 16:25:51
【问题描述】：

我正在使用原型来动态加载外部js文件（实际上是php文件）。像这样：

function UpdateJS(file)
{
  var url    = 'main_js.php?file='+file;
  var myAjax = new Ajax.Request( url, {method: 'get', onComplete: showResponseHeader} );
}
function showResponseHeader (originalRequest) 
{
  $('jscode').innerHTML = originalRequest.responseText;
}

容器“jscode”是这样定义的：

<script type="text/javascript" id="jscode"></script>

而且它有效！但是，如果调用了一些不同的文件，则会保留前一个文件中的所有功能。我不想那样。有人知道在调用第二个 js 文件时如何“卸载”第一个 js 文件吗？

（我也尝试过使用 Ajax.Updater 函数但结果是一样的。）

更新：事实证明，存在更大的问题：它仅在函数“UpdateJS”在 window.onload 中时才会加载，这就是为什么它在那之后不加载任何其他内容的原因。所以原型更新它可能不是一个好的方法......

【问题讨论】：

标签： javascript file dynamic prototypejs

【解决方案1】：

这里有一个关于如何动态卸载 Javascript 和 CSS 的很棒的教程：

http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

下面的代码是从上面的链接中借用的，它是一个纯 JS 解决方案，而不是 Prototype JS 解决方案，但应该可以解决问题：

function removejscssfile(filename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
 var allsuspects=document.getElementsByTagName(targetelement)
 for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
  if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
   allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
 }
}

removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page

如果您不需要 CSS 删除功能，我相信您可以破解它。

【讨论】：

我也读过这个，问题似乎是它删除了脚本节点，但实际上并没有从内存中删除定义的属性，这不是重点吗？
不，实际上不是。但是，是的，我认为这就是问题所在。如果我的新 .js 文件加载与第一个 .js 文件同名的函数，它将使用第二个，这就是我想要的。

【解决方案2】：

我认为您不能卸载在文件范围内定义的一组属性。一种解决方法是在一个中心对象中定义每个文件中包含的函数，只要您想摆脱它，您就可以废弃（或覆盖）它。

【讨论】：

【解决方案3】：

尝试以下方法：

function UpdateJS(file)
{
  $('jscode').innerHTML = '';  /*YOU NEED TO RESET THIS*/
  var url    = 'main.js'; /*YOU CAN USE A JAVASCRIPT FILE*/
  var myAjax = new Ajax.Request( url, {method: 'get', onComplete: showResponseHeader} );
}
function showResponseHeader (originalRequest) 
{
  $('jscode').innerHTML = originalRequest.responseText;
}

【讨论】：