如何通過瀏覽器寬度提供不同的JavaScript文件

所以我想某些瀏覽器寬度的某些Javascript文件。我知道@media會爲每個瀏覽器寬度和一些設備提供特定的CSS。我該如何處理Javascript文件，而不使用服務器端調用？如何通過瀏覽器寬度提供不同的JavaScript文件

JavaScript可能會根據瀏覽器寬度調用其他Javascript文件嗎？如果是這樣，怎麼樣？

在此先感謝。

來源

2011-01-26 ClosDesign

爲什麼你需要不同的JavaScript文件？如果用戶調整窗口大小會發生什麼？ – 2011-01-26 23:24:27

我幾乎不懷疑你需要不同寬度的代碼，更好地處理你的邏輯。 – 2011-01-26 23:28:10

我知道這樣使用媒體查詢會很好。移動樣式表中不再需要使用js的很多元素。就個人而言，如果瀏覽器下降到某個寬度以下，我想停止js加載。 – 2011-02-08 17:33:23

雖然我不確定爲什麼，但您始終可以通過JS腳本導入JavaScript文件。

以下鏈接提供了一些相關信息。

在一個側面說明 - 爲什麼你在看這樣做呢？當然，你可以得到屏幕的分辨率，然後根據這些變量調整計算/內容，而不需要更改JS文件。有很多不同的分辨率（移動設備，多顯示器，寬屏幕，投影儀等）。用戶還可以有效地重新調整瀏覽器的大小，使其不值得。

來源

2011-01-26 23:26:06

var scriptSrc = 'js/defaults.js'; 
if (screen.width <= 800) 
    scriptSrc = 'js/defaults-800.js'; 
else if (screen.width <= 1024) 
    scriptSrc = 'js/defaults-1024.js'; 
var script = document.createElement('script'); 
script.src = scriptSrc; 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(script);

也許？根據屏幕分辨率動態加載它們。也可以使用文檔大小，瀏覽器大小等。雖然我不積極，但您真的想要這樣做。 理想情況下，儘管您應該在設計中處理相對度量（如％或em），並避免這種情況。

來源

2011-01-26 23:27:30

試試這個：

var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 

if (window.document.body.clientWidth == XXX) { 
    fileref.setAttribute("src", "script1.js") 
} else { 
    fileref.setAttribute("src", "script2.js")

}

來源

2011-01-26 23:27:43

媒體查詢是針對不同窗口寬度提供替代的風格很好的解決方案。不幸的是，<script>元素沒有media屬性以類似的方式進行。

但是，您可以提供腳本加載腳本，該腳本將根據您的媒體查詢基於瀏覽器選擇的樣式表加載所需的.js文件。我不知道如何以直接，優雅的方式做到這一點，但有一個很好的黑客。你必須用一個唯一的聲明（虛擬的，不重要的或不同的設計）「標記」每個.css，並在頁面加載後從JS中檢查它，以確定瀏覽器應用了哪個樣式表。

的HTML可能看起來像這樣：

<style media="handheld, screen and (max-width:1023px)"> 
    body { margin-top: 0px } 
</style> 
<style media="screen and (min-width:1024px)"> 
    body { margin-top: 1px } 
</style>

和附帶的JS如下：

function onLoad() { 
    var head = document.getElementsByTagName('head')[0]; 
    var body = document.getElementsByTagName('body')[0]; 
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top'); 

    var script = document.createElement('script'); 
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js'); 
    head.appendChild(script); 
}

這做工作，但僅在每次負荷的基礎。要獲得用戶調整瀏覽器窗口大小的響應式響應，您應該跟蹤窗口的寬度並在必要時重新加載頁面。

來源

2013-04-26 19:34:18

自2011年以來，世界已經進入移動時代。

您可能想嘗試：document.documentElement.clientWidth，因爲它會告訴您網頁的可見區域 - 它會縮放但不會縮放。

來源

2014-02-27 20:27:05

如何通過瀏覽器寬度提供不同的JavaScript文件

回答

相關問題