如何使用jQuery在页面加载后完全动态地添加和删除JS文件？

Question

在我的项目中，我必须在页面加载后动态加载JS和CSS文件。使用以下代码，我能够添加和删除js文件，但是在删除之前添加新文件后，先前的文件不会显示在头部，但当我运行代码时，两个js文件的代码都会被执行。我不知道如何完全删除文件，请有人帮帮我。 代码如下：

在视图页面的头部：

<link rel="stylesheet" id="videoCss" />
<script id="videojs"></script>

使用jQuery动态加载JS和CSS文件：

function addRemoveJsCssFile(filename, filetype)
    {
        var fileref='';
        if (filetype == "js") { //if filename is a external JavaScript file
            document.getElementById("videojs").remove();
            fileref=document.createElement('script');
            fileref.setAttribute("type", "text/javascript");
            fileref.setAttribute("src", filename);
            fileref.setAttribute("id", "videojs");
        }
        else if (filetype == "css") { //if filename is an external CSS file

            document.getElementById("videoCss").remove();
            fileref = document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
            fileref.setAttribute("id", "videoCss");
        }
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref)
    }

在这个函数中，我们需要传递文件位置和文件类型（即css或js），以便动态添加文件。谢谢。

- Bibhudatta Sahoo

---

你可以参考这个链接：http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml。希望能对你有所帮助！ - RonyLoud

考虑针对一个 <script>，更改它的 src，然后将其删除。这样，无论它实际上是否从您的文件中删除（从逻辑上讲，它不能完全删除），它都无法引用您不想执行的 JS 文件。 - Joshua

亚，Josh，这就是我的问题。我想删除以前的JS文件并添加新的文件。你有什么方法吗？ - Bibhudatta Sahoo

Answer 1

我不知道我是否理解了你的问题，但让我试着解释一下：

如果原始脚本位于头部，则会立即执行，因为JavaScript是一种过程式语言，所以你无法在稍后放置的脚本中做任何事情：较早定义的脚本将较早地执行，因此，也许你的问题是当你调用函数时，它太晚停止videojs执行。

另一方面，对于先定义的脚本，你看不到稍后定义的脚本标记...或者更好的说法是，如果你延迟加载，你仍然会遇到同样的问题，videojs脚本总是会被执行（它始终会太晚或太早，因为你的语句要么在之前执行，要么在之后执行，没有第三种方式）。

当然，你可以在之前加载一个脚本，只是为了设置一个全局对象，可以告诉videojs“停止，不要继续你的工作！”，但显然你还需要编辑videojs代码，使用一个包装器“if”来询问该对象是否有权限继续进行，我想这不是你想要的答案。

但问题是：在那个JavaScript videojs中执行了什么，是在加载时开始的事件绑定器吗？或者在另一个事件中？或者只是按顺序执行的一系列语句 - 对不起，我用了一个双关语。

在第一种和第二种情况下，有一些事情你可以在之前做：如果video.js是在触发事件时启动的，你可以在该触发器之前停止执行该函数，通过删除事件订阅来实现：你必须知道第一个脚本如何操作以及它订阅的事件才能解除绑定。以下是如何在jQuery ready事件之前执行脚本的方法（但对于原生JavaScript事件也有效，因此我认为这可能会有所帮助）： running jQuery code before the dom is ready 即使可以通过“消失”每个videojs脚本效果来删除绑定，但这并不是一项干净的工作，因为：

1. 总体而言，videojs已经被执行了
2. 这只适用于videojs，至少它可能仅适用于使用相同事件启动的硬编码脚本，而不适用于所有硬编码脚本

因此，我建议你完全使用此管理器来管理脚本的加载和卸载，不要在HTML中硬编码它们。

PS：你听说过require.js吗？

如果没有，可以在这里看看（链接）。

- Sycraw

---

我真希望两天前就看到了这篇文章，在浪费了大部分时间去弄清楚Video.JS库及其插件在头标签中的行为之前。这也是我从未成为JavaScript粉丝的众多原因之一。 - David A. Gray

Answer 2

你可以使用$.getScript()动态加载js文件。

- Sahil

Answer 3

试试这个

$('#scriptid').remove(); //remove it first and then add the new one

var script = document.createElement('script');
script.src = something;

document.head.appendChild(script); //Add element to head tag

OR

$("<style type='text/css' href=''></style>").appendTo("head");
$("<script type='text/javascript' src=''></script>").appendTo("head");

- Marios Nikolaou

---

好的，我也尝试过这个方法。它会添加新的JavaScript代码，但我还需要动态地删除先前的脚本。 - Bibhudatta Sahoo

Answer 4

与其删除整个元素，再创建新的元素，不如尝试只更改现有元素中的“src”属性？

现在

document.getElementById("videojs").remove();
fileref=document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", filename);
fileref.setAttribute("id", "videojs");

建议

document.getElementById("videojs").setAttribute("src", filename);

- linearSpin

---

我之前试过。通过更改src，脚本的src会改变，但代码不会改变。 - Bibhudatta Sahoo