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);

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

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;
}

动态加载和卸载JavaScript

3 个答案: