Question

每个人......祝你有个美好的一天...... 我想问一下，当浏览器宽度改变为不同的分辨率时，我正在制作代码来改变Html文档的Head部分中的一些javascript文件...但它似乎不起作用...... 如果你们告诉我这段代码中有什么问题对我有用..谢谢...

这是代码......

        <script id="size-banner" type="text/javascript" src=" "></script>

        <script type="text/javascript">
            function adjustBanner(width) {
                    width = parseInt(width);
                    if (width < 701) {
                        $("#size-banner").attr("src", " ");
                    } else if ((width >= 960) && (width < 1280)) {
                        $("#size-banner").attr("src", "edge_includes/index_edgePreload.js");
                    } else {
                        $("#size-banner").attr("src", "edge_includes/index1250_edgePreload.js"); 
                    }
                }

                $(function() {
                    adjustBanner($(this).width());
                    $(window).resize(function() {
                        adjustBanner($(this).width());
                    });
                });
        </script>

Answer 1

如果您确实想在加载后向页面添加脚本，则以下代码将起作用：

(function() {
  var po = document.createElement('script');
  po.type = 'text/javascript'; po.async = true;
  po.src = 'http://pathtoyourscript.com/script.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
})();

您的最终adjustBanner功能类似于：

function adjustBanner(width) {
  width = parseInt(width);

  var src = ' ';
  if ((width >= 960) && (width < 1280)) {
    src = 'edge_includes/index_edgePreload.js';
  } else if (width >= 1280) {
    src = 'edge_includes/index1250_edgePreload.js'; 
  }

  var po = document.createElement('script');
  po.type = 'text/javascript'; po.async = true;
  po.src = src;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
}

此代码正在执行的操作是在页面上附加脚本标记，从而导致浏览器立即加载它。加载脚本时，浏览器中的JavaScript解释器将继续运行脚本源。如果您在JavaScript中变异或修改变量，全局或模块，那么只要JavaScript解释器收到源代码，就会发生这种修改。

根据脚本源的作用，您可能需要小心在每个 window.resize事件上调用此事件而不清除旧脚本（例如，将模块设置为undef）。这是因为每次调整窗口大小时，与当前分辨率关联的脚本都将附加到文档源，从而改变已在JavaScript上下文中设置的任何变量。

叫我疯了，但你可能想考虑使用CSS media queries而不是JavaScript / jQuery来完成你想要的。您可以为特定分辨率定义样式，然后根据当前窗口的分辨率，浏览器会做出正确的事情。您的有条件加载的脚本（运行动画）需要具有分辨率，但这似乎比在您的页面上交换JavaScript更好。

举个例子：

<html>                                                                          
  <style>                                                                       
    @media (max-width: 700px){                                                  
      #smallCage { display: block; }                                            
      #mediumCage { display: none; }                                            
      #largeCage { display: none; }                                             
    }                                                                           
    @media all and (min-width: 701px) and (max-width: 1000px) {                 
      #smallCage { display: none; }                                             
      #mediumCage { display: block; }                                           
      #largeCage { display: none; }                                             
    }                                                                           
    @media all and (min-width: 1001px) {                                        
      #smallCage { display: none; }                                             
      #mediumCage { display: none; }                                            
      #largeCage { display: block; }                                            
    }                                                                           
  </style>                                                                      
  <body>                                                                        
    <div id="smallCage">                                                        
      <img src="http://www.placecage.com/200/300" />                            
    </div>                                                                      
    <div id="mediumCage">                                                       
      <img src="http://www.placecage.com/400/600" />                            
    </div>                                                                      
    <div id="largeCage">                                                        
      <img src="http://www.placecage.com/800/1200" />                           
    </div>                                                                      
  </body>                                                                       
</html>

在这个例子中，我有3个不同大小的图像，可以根据浏览器分辨率有选择地渲染它们。你可以使用canvas元素或者你用于JS动画的任何东西做同样的事情。

最后一种选择是让执行动画的实际JavaScript知道浏览器宽度，然后在屏幕调整大小时做正确的事情。

用于更改HTML内容的Javascript代码

1 个答案: