如何檢測窗口大小，然後更改正在添加到標題的JavaScript文件？

我有這個jQuery來檢測屏幕大小，然後根據sceen大小追加文件到標題。如何檢測窗口大小，然後更改正在添加到標題的JavaScript文件？

var scriptSrc = ''; 
var widowWidth = $(window).width(); 
if(widowWidth >= 1024) 
    scriptSrc = '/js/desktop.js'; 
if((widowWidth <= 1023) && (widowWidth >= 768)) 
    scriptSrc = '/js/tablet.js'; 
else if(widowWidth <= 767) 
scriptSrc = '/js/mobile.js'; 
var script = document.createElement('script'); 
script.src = scriptSrc; 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(script);

我曾嘗試使用$（窗口）.resize（）用它，但我一直無法取出被觸發大小調整之前原先添加的文件。

我有一個JSFIDDLE您可以更改我的代碼，因爲您可以看到它會根據屏幕大小添加js文件，但是我希望在屏幕上也可以更改。

謝謝你的時間！

來源

2014-04-28 Amir5000

下面是我用：

$(window).bind('resize', function(event) {  
//Whatever you want to run here  

});

只需設一個變量爲你的窗口的寬度和高度，並檢查它們在這個函數裏面是什麼。

至於改變你的JavaScript文件時，屏幕調整大小無需重新加載整個頁面...我不認爲這是可能的。解決辦法可能是將所有JavaScript文件導入到一個文件中，然後運行不同的函數來覆蓋最後一次javascript函數所做的任何更改。

雖然這顯然使用jQuery。

來源

2014-04-28 20:01:19 mcphersonjr

這是一個很好但同樣的問題，它會多次添加文件並且不會刪除重複項。所以你認爲除了重新加載頁面之外沒有其他辦法？ – Amir5000

你可以附加一個新的腳本文件的HTML文件，但你將不得不在該文件上運行一個功能。所以，我並沒有搞砸這個，而是隻有一個主文件，其中包含了所有其他文件，並且只是運行一個函數。更改JavaScript文件的最終結果是什麼？ – mcphersonjr

以及我在桌面上只有一些jQuery傳送帶，而對於手機，我有一些觸摸事件，我不想在大屏幕上加載。和一些這樣的事情。 – Amir5000

將您的代碼添加到resize事件的回調函數中。

$(window).resize(function(elem){ 
    var scriptSrc = ''; 
    var widowWidth = $(window).width(); 
    if(widowWidth >= 1024) 
     scriptSrc = '/js/desktop.js'; 
    if((widowWidth <= 1023) && (widowWidth >= 768)) 
     scriptSrc = '/js/tablet.js'; 
    else if(widowWidth <= 767) 
     scriptSrc = '/js/mobile.js'; 
    var script = document.createElement('script'); 
    script.src = scriptSrc; 
    var head = document.getElementsByTagName('head')[0]; 
    head.appendChild(script); 
});

調整窗口大小時會調用回調函數。然而，該事件將用於在調整窗口大小的變化，所以要針對

來源

2014-04-28 19:55:01

是的，這是我以前試過的，就像我說我無法刪除正在加載的一個，只添加一次新的。沒有辦法不這樣做嗎？ – Amir5000

你可以嘗試使用'.remove（）'方法。我發現這個鏈接，可以幫助 - http://stackoverflow.com/questions/8503560/how-do-i-use-jquery-to-remove-all-script-tags-in-a-string-of-html –

是的，我嘗試過，但我無法得到它的工作。 – Amir5000

如果我正確理解你的問題，你要聽的窗口大小調整事件

var onsize = function() { 
    var W = $(window).width(); 
    if(W >= 500) { 
     test.html('/js/desktop.js'); 
    } else if(W >= 300) { 
     test.html('/js/tablet.js'); 
    } else { //if(widowWidth <= 767) 
     test.html('/js/mobile.js'); 
    } 
};

我說準備每個像素被解僱一個div來顯示輸出。

$（window）.resize（onsize）;

這裏的小提琴http://jsfiddle.net/devm33/aC8Ez/

來源

2014-04-28 19:55:06

我希望它在頁面加載時根據窗口大小加載其中一個js文件，然後如果窗口在頁面加載後再次調整大小以繼續檢查大小，然後添加文件並相應刪除另一個文件 – Amir5000

如何檢測窗口大小，然後更改正在添加到標題的JavaScript文件？

回答

相關問題