javascript - 使用 Prototype 动态加载 js 文件？

Question

我正在使用原型(prototype)动态加载外部 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 中时才加载，这就是为什么在那之后它不加载任何其他内容的原因。所以原型(prototype)更新可能不是一个很好的方法......

Answer 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 删除功能，我相信您可以将其删除。