如何根据屏幕分辨率加载或不加载JS脚本（进入head部分）？

Question

在网站上，我在标签上有这些行

  <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>

但它不起作用

先感谢您

Answer 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>

Answer 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);
    }

Answer 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>

Answer 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);
}

我希望它有所帮助。

Answer 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>

Answer 6

您可以阅读有关异步（动态）加载脚本的信息。 在加载之前，您可以检查解析并加载所需的脚本。

您可以过滤服务器端的脚本列表（检查移动设备的标头），并在标头中仅包含所需的脚本。

如何根据屏幕分辨率加载或不加载JS脚本（进入head部分）？

问题描述

6 个解决方案

解决方案1
7 已采纳 2015-08-06 06:49:11

解决方案2
4 2015-08-06 06:43:16

解决方案3
2 2015-08-06 06:48:43

解决方案4
1 2015-08-06 06:45:21

解决方案5
0 2015-08-06 06:41:08

解决方案6
0 2015-08-06 06:41:54

如何根据屏幕分辨率加载或不加载JS脚本（进入head部分）？

问题描述

6 个解决方案

解决方案1 7 已采纳 2015-08-06 06:49:11

解决方案2 4 2015-08-06 06:43:16

解决方案3 2 2015-08-06 06:48:43

解决方案4 1 2015-08-06 06:45:21

解决方案5 0 2015-08-06 06:41:08

解决方案6 0 2015-08-06 06:41:54

解决方案1
7 已采纳 2015-08-06 06:49:11

解决方案2
4 2015-08-06 06:43:16

解决方案3
2 2015-08-06 06:48:43

解决方案4
1 2015-08-06 06:45:21

解决方案5
0 2015-08-06 06:41:08

解决方案6
0 2015-08-06 06:41:54