0

大家...有美好的一天...我想问我正在编写代码来更改 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>
4

1 回答 1

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 媒体查询而不是 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 个不同大小的图像，可以根据浏览器的分辨率有选择地渲染它们。您可以对画布元素或用于 JS 动画的任何东西做同样的事情。

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

于 2013-08-16T23:41:14.177 回答