Question

所以我想要某些浏览器宽度的某些Javascript文件。我知道@media为每个浏览器宽度和一些设备提供特定的CSS。我如何为Javascript文件做类似的事情，没有使用服务器端调用？

可以使用Javascript根据浏览器宽度调用其他Javascript文件吗？如果是这样，怎么样？

提前致谢。

Answer 1

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

也许？根据屏幕分辨率动态加载它们。也可以使用文档大小，浏览器大小等。虽然我不是肯定的，但你真的想要这样做。 理想情况下，您应该在设计中处理相对指标（例如％或em）并避免这种情况。

Answer 2

虽然我不确定原因，但您始终可以通过JS Script导入JavaScript文件。

以下链接提供了相关信息。

旁注 - 你为什么要这样做？当然，您可以获得屏幕的分辨率，然后根据这些变量调整计算/内容，而无需更改JS文件。有许多不同的分辨率（移动设备，多个显示器，宽屏幕，投影仪等）。用户还可以有效地重新调整浏览器的大小，使其不值得。

Answer 3

试试这个：

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

}

Answer 4

媒体查询是为不同窗口宽度提供替代样式的好方法。不幸的是，media元素没有<script>属性可以继续进行。

但是，您可以提供脚本加载脚本，该脚本将根据您的媒体查询根据浏览器选择的样式表加载所需的.js文件。我不知道如何以直接，优雅的方式做到这一点，但有一个很好的黑客。您必须使用唯一声明（虚拟，不重要或设计不同）“标记”每个.css，并在页面加载后从JS中检查它以确定浏览器应用了哪个样式表。

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>

随附的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);
}

这可以完成工作，但仅限于每个负载。为了响应用户调整浏览器窗口大小的响应，您应该跟踪寡妇的宽度并在必要时重新加载页面。

Answer 5

自2011年以来，世界已进入移动时代。

您可能想尝试使用：document.documentElement.clientWidth，因为它会告诉您页面的可见区域 - 它会对缩放做出反应，但不会对音高做出反应。

如何按浏览器宽度提供不同的javascript文件

5 个答案: