動態加載和卸載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;
}