动态加载和卸载JavaScript

Question

我想添加一个脚本

 if(screensize>980){
  add <script src="somejs">// functions should work without time delay
}
if(screensize<980){
 remove  <script src="somejs">
}

当屏幕尺寸小于900时，并且当用户将屏幕尺寸调整为更大尺寸时，我想删除相同的脚本。 然后再次返回，根据屏幕大小动态删除和添加脚本。 脚本相关的函数应该可以正常工作，没有任何问题（动态地），并且没有延迟和重新加载。 可能吗。 我尝试了很多事情，但没有任何效果。

$.ajax, document.createElement("script") -我尝试了这两个，但是我希望它可以动态删除和添加。

例如：添加和删除<script src="somescript"> 。 是否有可能动态注释和取消注释已加载的脚本？

Answer 1

删除和添加似乎很麻烦。 您不能简单地在脚本开头添加对当前屏幕尺寸的检查，如果不适合参数则中止检查吗？

Answer 2

当屏幕尺寸小于900时，我想添加一个脚本；当用户将屏幕尺寸调整为更大时，我想删除相同的脚本。 然后再次返回，根据屏幕大小动态删除和添加脚本。

为什么不将Event Listener附加到屏幕上以注意屏幕尺寸的变化：

window.addEventListener("resize",addOrRemoveFunction,false);

然后编写一个函数，该函数确定屏幕尺寸的宽度，并相应地向myElement添加或删除Event Listener ：

function addOrRemoveFunction() {

    if (window.innerWidth < 900) {
        myElement.addEventListener("click",myFunction,false);
    }

    else if (window.innerWidth > 899) {
        myElement.removeEventListener("click",myFunction,false);
    }
}

然后，您可以根据当前屏幕宽度编写任何您希望具有或不存在的功能：

function myFunction() {

[Javascript here]

}

Answer 3

jQuery的$.getScript("your script location")会完成一半的工作。 另一方面，我对此表示怀疑。 但是，如果您将脚本结构化为模块化，则可以模仿它。 如下所示的内容可能会起作用（未测试）：

var baseScript;
var scripts = {};

(function (module) {
    var _field = ...;
    var _privateFunction = function() {...};
    module.property = ...
    module.publicFunction = function () {...};
})(scripts.largeScreenScript);

(function (module) {
    ...
})(scripts.smallScreenScript);

if(screensize>980){
    baseScript = scripts.largeScreenScript;
}
if(screensize<980){
    baseScript = scripts.smallScreenScript;
}