如何根据屏幕分辨率加载或不加载 JS 脚本（进入头部）？
Posted
技术标签:
【中文标题】如何根据屏幕分辨率加载或不加载 JS 脚本（进入头部）？【英文标题】：How to load or not a JS script (into the head section) based on screen resolution? 【发布时间】：2015-08-06 06:39:08 【问题描述】：在网站上，我在标签上有这些行
<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>
但它不起作用
提前谢谢你
【问题讨论】：
Conditionally load JavaScript file 的可能重复项 Call external JS file based on "media screen" value的可能重复 【参考方案1】：用这个脚本标签替换你的脚本标签，这将创建仅窗口宽度大于一定数量的其他三个脚本标签。
这个答案不依赖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】：在你的脚本中
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】：试试这样的：
<!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>
【讨论】：
或者你也可以尝试 Ajax Requests 来加载脚本文件并使用“eval”函数执行它们【参考方案4】：检查 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);
希望对你有帮助。
【讨论】：
还有.. 我的代码在做什么？ Ir 检查宽度，如果它大于加载 jquery 的数量...... 好的。你是对的，我已经编辑了我的答案以使其正常工作。谢谢【参考方案5】：<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】：您可以阅读有关异步（动态）加载脚本的信息。在加载之前，您可以检查分辨率并加载所需的脚本。
您可以在服务器端过滤脚本列表（检查移动设备的标头）并包含在标头中只需要的脚本。
【讨论】：
以上是关于如何根据屏幕分辨率加载或不加载 JS 脚本（进入头部）？的主要内容，如果未能解决你的问题，请参考以下文章
根据img大小而不是屏幕大小使用HTML5或CSS3加载不同的图像[重复]