Question

我正在构建一个新的基于AJAX的网站，其中包含不同的部分。每个部分都需要一组新的Javascript函数才能运行。我不想在开始时加载每个脚本，因为可能会有很多脚本。

有没有办法使用AJAX加载新脚本并删除旧脚本（以确保没有类似变量名称或函数签名的兼容性问题）。

由于

编辑 - JQuery很好，它不一定是老派Javascript

Answer 1

三件事：

1）是的，您可以加载新脚本。您甚至不需要XHR意义上的AJAX - 只需动态地在页面中包含脚本标记即可。 jQuery为这样的事情提供$ .getScript（），或者你可以简单地创建一个脚本元素并将其附加到文档的头部。如果你谷歌它有很多例子。

2）关于删除旧（和冲突等）。假设您可以控制这些函数名称，只需将它们命名为：

window.myapp = {};
window.myapp.mysection = {};
window.myapp.myothersection = {};
window.myapp.mysection.myfunction = function(){}

然后你不必担心冲突。

3）小心这一点。按需加载所有这些脚本的开销可能不仅仅是一次性压缩和加载整个脚本。

Answer 2

jQuery使它非常简单。

$.getScript('myscript.js', function() {
  console.debug('Script loaded.');
});

如果你不能使用jQuery，还需要写几行。

var head = document.getElementByTagName('head')[0],
    script = document.createElement('script');
script.src = 'myscript.js';
head.appendChild(script);

Answer 3

脚本元素也是DOM树的一部分，您可以随意附加和删除。

Answer 4

是的，你可以使用oldschool Javascript。

function addScript(src) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = src;
    document.getElementsByTagName('head')[0].appendChild(s);
    return s;  // to remove it later
}

加载脚本后，您可以再次删除标记（使用removeChild），例如，在加载新部分时。这就是我的函数结束时返回语句的原因。我不确定它是否有用。

您可以添加“onload”属性，以便在脚本完全加载时通过回调获得警告，但这可能不是非常跨平台的。

Answer 5

只需谷歌JavaScript点播

http://www.google.ca/search?sourceid=chrome&ie=UTF-8&q=javascript+on+demand

例如，jQuery提供$ .getScript（），请参阅http://api.jquery.com/jQuery.getScript/

Answer 6

要加载新脚本，您应该查看LABjs

无法卸载它们，请参阅此问题的another StackOverflow post。

Answer 7

我以前从未尝试过...... 但是，您可以尝试使用ajax调用php表单并将新的javascript添加到body元素中的div。我希望它能起作用..

是否可以使用AJAX加载新的Javascript文件？

7 个答案: