如何根據屏幕分辨率加載或不加載JS腳本（進入head部分）？
[英]How to load or not a JS script (into the head section) based on screen resolution?
問題描述
在網站上，我在標簽上有這些行
<script type="text/javascript" src="http://www.domain.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.domain.com/js/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="http://www.domain.com/js/inner-code-colorbox.min.js"></script>
哪些是加載JS代碼，不應該在便攜式系統上加載
有辦法嗎？
我試過這樣的方式：
<script type="text/javascript" media="only screen and (min-width: 950px)" src="http://www.domain.com/js/jquery.min.js"></script>
但它不起作用
先感謝您
6 個解決方案
解決方案1
7 已采納 2015-08-06 06:49:11
使用此腳本標記替換腳本標記，這將僅創建窗口寬度大於特定量的其他三個腳本標記。
這個答案不依賴於jQuery，因此您可以使用它來確定是否要加載jQuery。
<script>
if (window.innerWidth > 500) {
var head = document.getElementsByTagName('head')[0];
var s1 = document.createElement("script");
s1.type = "text/javascript";
s1.src = "http://www.domain.com/js/jquery.min.js";
head.appendChild(s1);
var s2 = document.createElement("script");
s2.type = "text/javascript";
s2.src = "http://www.domain.com/js/jquery.colorbox.min.js";
head.appendChild(s2);
var s3 = document.createElement("script");
s3.type = "text/javascript";
s3.src = "http://www.domain.com/js/inner-code-colorbox.min.js";
head.appendChild(s3);
}
</script>
解決方案2
4 2015-08-06 06:43:16
在你的腳本中
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var head = document.getElementsByTagName('head').item(0);
if(width > 950){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.domain.com/js/jquery.min.js";
head.appendChild(script);
}
解決方案3
2 2015-08-06 06:48:43
嘗試這樣的事情：
<!DOCTYPE html>
<html>
<head>
<script id="waiting"></script>
</head>
<body>
<script>
(function(){
if(screen.width > 800)
//checks if the screens width is greater than 800
document.querySelector("#waiting").setAttribute("src", "URL HERE");
}());
</script>
</body>
</html>
解決方案4
1 2015-08-06 06:45:21
檢查Javascript你的屏幕寬度，然后像這樣追加你的腳本。
if(window.innerWidth > 950){
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://www.domain.com/js/jquery.min.js";
$("head").append(s);
}
我希望它有所幫助。
解決方案5
0 2015-08-06 06:41:08
<script>標記不支持media屬性。 您可以使用JS檢查屏幕分辨率，然后根據需要動態注入腳本標記。 與可以根據當前分辨率添加或刪除規則集的CSS不同，請注意腳本是否運行，因此如果您需要根據當前屏幕尺寸更改某些代碼，請在代碼本身中添加檢查。
<script> if (window.innerWidth >= 950) { var script = document.createElement('script'); script.src = 'http://www.domain.com/js/jquery.min.js'; document.getElementsByTagName('script')[0].insertBefore(script); } </script>
解決方案6
0 2015-08-06 06:41:54
您可以閱讀有關異步（動態）加載腳本的信息。 在加載之前，您可以檢查解析並加載所需的腳本。
您可以過濾服務器端的腳本列表（檢查移動設備的標頭），並在標頭中僅包含所需的腳本。
如何在Node.js中基於Jade的視圖的頭部添加額外的javascript
[英]How to add extra javascript to the head section in a Jade-based view in Node.js
附加 <script src=“”></script> 根據屏幕寬度來控制
[英]appending <script src=“”></script> to head based on screen width
如何使 javascript 僅在首頁上加載<head>部分
[英]How to make an javascript load only on frontpage in the <head> section
如何在cpanel的wordpress主題的頭部添加腳本標簽？
[英]How to add script tag in head section to wordpress theme in cpanel?
如何為所有mediawiki頁面的<head>部分添加外部<script>？
[英]How to add external <script> to <head> section for all mediawiki pages?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.