如何根据屏幕分辨率加载或不加载JS脚本（进入head部分）？
[英]How to load or not a JS script (into the head section) based on screen resolution?
问题描述
on a website, I have these lines on the tag 
在网站上，我在标签上有这些行
<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>
Which are loading JS code, that shouldn't be loaded at all on portable systems 哪些是加载JS代码，不应该在便携式系统上加载
Is there a way to do it? 有办法吗？
I tried in this way: 我试过这样的方式：
<script type="text/javascript" media="only screen and (min-width: 950px)" src="http://www.domain.com/js/jquery.min.js"></script>
But it's not working 但它不起作用
Thank you in advance 先感谢您
6 个解决方案
解决方案1
7 已采纳 2015-08-06 06:49:11
Replace your script tags with this script tag, which will create the other three script tags ONLY of the window width is larger than a certain amount. 使用此脚本标记替换脚本标记，这将仅创建窗口宽度大于特定量的其他三个脚本标记。
This answer does not rely on jQuery, so you can use it to determine whether you want to load jQuery. 这个答案不依赖于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
In your script 在你的脚本中
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
Try something like this : 尝试这样的事情：
<!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
Check on Javascript your screen width and then append your script like this. 检查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);
}
I hope it helps. 我希望它有所帮助。
解决方案5
0 2015-08-06 06:41:08
<script> tags don't support the media attribute. <script>标记不支持media属性。 You can check the screen resolution with JS and then dynamically inject a script tag if needed. 您可以使用JS检查屏幕分辨率，然后根据需要动态注入脚本标记。 Unlike CSS which can add or remove rulesets based on the current resolution, note the script either runs or not, so if you need some code to change based on current screen dimensions, add checks in the code itself. 与可以根据当前分辨率添加或删除规则集的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
You can read about async (dynamic) loading scripts. 您可以阅读有关异步（动态）加载脚本的信息。 Before load you can check resolution and load needed scripts. 在加载之前，您可以检查解析并加载所需的脚本。
You can filter list of scripts on the server side (check headers for mobile devices) and include in header only needed scripts. 您可以过滤服务器端的脚本列表（检查移动设备的标头），并在标头中仅包含所需的脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.