只根據屏幕大小加載JavaScript文件

我正在努力使網站響應。目前，該網站必須有兩個橫幅 - 一個用於桌面和一個來自移動網站。只根據屏幕大小加載JavaScript文件

我已經得到了所有與媒體查詢等位置，但我現在已經注意到，desktop banner javascript file中的東西導致mobile banner javascript無法正常工作。

所以我想我只能在屏幕高於一定大小時才加載desktop banner js file，比如1000px。

我不確定這是可能的，雖然和如何？或者有什麼其他方式可以在移動橫幅顯示時取消desktop js file？

任何建議表示讚賞！

2016-01-20 MariaL

爲什麼不改用圖片的媒體查詢呢？ – MinusFour

這是非常沒有生產力的。試着做媒體查詢（99％的問題可以通過這個來解決），或者如果你真的想這樣做，可以嘗試在JavaScript中使用'height'和'width'屬性來運行你的代碼片段/函數。將此用作參考http：// www。w3schools.com/jsref/prop_win_innerheight.asp – codeninja

請勿根據屏幕大小有選擇地加載JavaScript。調整瀏覽器大小時，會導致網絡抖動，並且將JS的幾個字節移除到單獨文件中的節省是不值得的。 – Mathletics

如果要加載一個JavaScript file，你可以檢測用戶代理與navigator.userAgent和負載移動和其他用戶不同的腳本：

function isMobile() { 
 
    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)); 
 
} 
 

 

 
function loadScript(url) { 
 
    var head = document.getElementsByTagName("head")[0]; 
 
    var script = document.createElement("script"); 
 
    script.type = "text/javascript"; 
 
    script.src = url; 
 
    head.appendChild(script); 
 
} 
 

 
if (isMobile()) { 
 
    loadScript("MOBILE-script.js"); 
 
    console.log("mobile script"); 
 
} else { 
 
    loadScript("DESKTOP-script.js"); 
 
    console.log("desktop script"); 
 
}

來源

2016-01-20 14:32:32

if (window.innerWidth < 1000) { 
    ... mobile banner code 
} else { 
    ... desktop banner code 
}

如果用戶調整窗口大小，你自己:) :)

來源

2016-01-20 14:32:58 daghan

這就是爲什麼你應該使用'screen'，而不是'window'，你不能調整屏幕的大小 –

@JuanMendes我肯定可以調整屏幕大小。 –

我可以按照不同的方式調整手機屏幕的大小（在某些應用中，就是這樣）。 –

你可以使用screen.width in Javascript

if (screen.width > 1000) { 
//load file for screen width 1000 and up here 
} else { 
//load file for screen width under 1000 here 
}

這隻會加載兩個文件中的一個，具體取決於屏幕大小。

來源

2016-01-20 14:35:56

屏幕大小可以用

screen.availWidth // 1920 
screen.availHeight // 1112

來源

2016-01-20 14:36:23

可以設置一個標誌根據窗口大小進行檢索，一切維度之外，您將需要的信息是在上面的代碼片段。

var w = window, 
    d = document, 
    e = d.documentElement, 
    g = d.getElementsByTagName('body')[0], 
    x = w.innerWidth || e.clientWidth || g.clientWidth, 
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

請記住，您可能需要將腳本加載到resize事件處理程序上。我強烈建議使用debouncing管道功能來更有效地處理調整大小。

之後，您可以使用一些實用的功能加載腳本：

function loadScript(url, callback) { 
    // Adding the script tag to the head as suggested before 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 

    // Then bind the event to the callback function. 
    // There are several events for cross browser compatibility. 
    script.onreadystatechange = callback; 
    script.onload = callback; 

    // Fire the loading 
    head.appendChild(script); 
} 

if (x > 1000) { 
    //desktop 
    loadScript("desktop.js", myPrettyCode); 
} else { 
    //mobile tablet 
    loadScript("mobile.js", myPrettyCode); 
}

請記住，像Modernizr的工具庫，有一些有用的功能檢測的助手，可以幫助你。大衛沃爾什也有provided a quite smart way來檢測屏幕尺寸。此外，卸載腳本是相當苛刻的here is相關的StackOverflow問題

您也可以看看這個question，因爲它可能會有所幫助，以及在require.js考慮看看，這是一個有效的JavaScript文件和模塊加載器。

來源

2016-01-20 14:41:07 Theodore

只根據屏幕大小加載JavaScript文件

回答

相關問題