如何按浏览器宽度提供不同的 javascript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4811238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to serve up different javascript files by browser width
提问by ClosDesign
So I want certain Javascript files for certain browser widths. I know that @media serves up specific CSS per browser width and some devices. How would I do something similar for Javascript files, WITHOUT using server side calls?
所以我想要某些浏览器宽度的某些 Javascript 文件。我知道@media 为每个浏览器宽度和某些设备提供特定的 CSS。如果不使用服务器端调用，我将如何对 Javascript 文件执行类似的操作？
Is is possible with Javascript to call other Javascript files based on browser width? If so, How?
Javascript 是否可以根据浏览器宽度调用其他 Javascript 文件？如果是这样，如何？
Thanks in advance.
提前致谢。
采纳答案by Ryan Ternier
While I'm unsure on why, you can always import JavaScript files through JS Script.
虽然我不确定为什么，但您始终可以通过 JS Script 导入 JavaScript 文件。
The following links give some information on this.
以下链接提供了有关此的一些信息。
- http://www.kevinleary.net/loadexternal-javascript-jquery-getscript/
- http://www.stackoverflow.com/questions/1140402/how-to-add-jquery-in-js-file
- http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
- http://www.kevinleary.net/loadexternal-javascript-jquery-getscript/
- http://www.stackoverflow.com/questions/1140402/how-to-add-jquery-in-js-file
- http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
ON a side note - Why are you looking at doing this? Surely you can get the resolution of the screen and then adjust calculations / content based on those variables without the need to change JS files. There are so many different resolutions (mobile devises, multiple monitors, wide screen, projectors etc.). A user can also re-size the browsers effectively making this not worth it.
旁注 - 你为什么要这样做？当然，您可以获得屏幕的分辨率，然后根据这些变量调整计算/内容，而无需更改 JS 文件。有很多不同的分辨率（移动设备、多显示器、宽屏幕、投影仪等）。用户还可以有效地重新调整浏览器的大小，使其不值得。
回答by Brad Christie
var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
Perhaps? Dynamic-load them based on screen resolution. Could also use document size, browser size, etc. Though I'm not positive you really want to be doing this. Ideally though you should be dealing with relative metrics (like % or em) in your design and avoid this.
也许？根据屏幕分辨率动态加载它们。也可以使用文档大小、浏览器大小等。虽然我不肯定你真的想这样做。理想情况下，您应该在设计中处理相对指标（如 % 或 em）并避免这种情况。
回答by The Coding Monk
Try this:
试试这个：
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
if (window.document.body.clientWidth == XXX) {
fileref.setAttribute("src", "script1.js")
} else {
fileref.setAttribute("src", "script2.js")
}
}
回答by Krzysztof Abramowicz
Media queries are a good solution for providing alternative styles for different window widths. Unfortunately, there is no mediaattribute for the <script>element to proceed similarly.
媒体查询是为不同的窗口宽度提供替代样式的一个很好的解决方案。不幸的是，元素没有类似处理的media属性<script>。
You can, however, provide a script-loading script which will load desired .jsfile depending on the style sheet selected by the browser on the basis of your media query. I don't know how to do this in a direct, elegant way but there is a nice hack for that. You have to "mark" each .csswith a unique declaration (dummy, unimportant or different by design) and check it from within JS after the page has loaded to determine which style sheet has been applied by the browser.
但是，您可以提供脚本加载脚本，该脚本将.js根据浏览器根据媒体查询选择的样式表加载所需文件。我不知道如何以直接、优雅的方式做到这一点，但有一个很好的技巧。您必须.css用唯一的声明（虚拟的、不重要的或设计不同）“标记”每个声明，并在页面加载后从 JS 中检查它以确定浏览器应用了哪个样式表。
The HTML could look like this:
HTML 可能如下所示：
<style media="handheld, screen and (max-width:1023px)">
body { margin-top: 0px }
</style>
<style media="screen and (min-width:1024px)">
body { margin-top: 1px }
</style>
And the accompanying JS as follows:
以及随附的 JS 如下：
function onLoad() {
var head = document.getElementsByTagName('head')[0];
var body = document.getElementsByTagName('body')[0];
var mark = window.getComputedStyle(body).getPropertyValue('margin-top');
var script = document.createElement('script');
script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js');
head.appendChild(script);
}
This does the job, but only on a per-load basis. To get a responsive reaction to resizing the browser's window by the user, you should keep track on the widow's width and reload the page when necessary.
这可以完成工作，但仅限于每个负载。要获得用户调整浏览器窗口大小的响应，您应该跟踪寡妇的宽度并在必要时重新加载页面。
回答by Nuno Silva
Since 2011 the world has shifted into the mobile era.
自 2011 年以来，世界已进入移动时代。
You might wanna try with: document.documentElement.clientWidth, as it will tell you the visible area of your page - it reacts to zoom but not to pitch.
您可能想尝试使用: document.documentElement.clientWidth，因为它会告诉您页面的可见区域 - 它会对缩放做出反应，但不会对俯仰做出反应。
