62

我需要一个 JS 语句来确定使用哪个 JavaScript 文件。

我有一个文件：

<script type="text/javascript" src="js/jquery_computer.js"></script>

但是当屏幕宽度小于 500px 时，我想加载另一个文件：

<script type="text/javascript" src="js/mobile_version.js"></script>

我已经尝试了一切，但它不起作用。

4

8 回答 8

66

您必须自己在 JS 中创建该标记。像这样的东西：

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if (screen.width > 500)
{
    js.src = "js/jquery_computer.js";
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);
于 2013-03-20T10:54:29.577 回答
27

如果您希望异步加载脚本，这里的其他答案就是这样做的。

如果您希望它与页面加载同步加载，这是非常非常少的剩余有效用例之一document.write：

<script>
(function() { // Scoping function to avoid globals
    var src = /*you want the main version*/ ? "jquery_computer.js" : "mobile_version.js";
    document.write('<script src="js/' + src + '"><\/script>');
})();
</script>

（我已删除type，因为 JavaScript 是默认设置，指定它没有用。）

于 2018-09-24T11:56:17.813 回答
12

也许您可以使用matchMedia.js并可以使用jQuery.getScript加载脚本

$(function(){
    if (matchMedia('only screen and (max-width: 500px)').matches) {
        $.getScript(...);
    }
});
于 2013-03-20T10:55:49.293 回答
8

最好的办法是使用内置的 matchMedia API。

var script = document.createElement('script');
script.type='text/javascript';

if(window.matchMedia("(min-width:500px)").matches) {
  script.src = 'js/jquery.slitslider.js';      
}else{
  script.src = 'js/mobile_version.js';      
}

document.getElementsByTagName('head')[0].appendChild(script);

缺点是 IE < 10 不支持

于 2013-03-20T11:05:01.090 回答
5

你不需要 jQuery，<script>在 DOM 中动态创建标签就足够了：

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

script.type = 'text/javascript';

if (<screen-width less than 500>)
    script.src = "js/mobile_version.js";
else
    script.src = "js/jquery_computer.js";

head.appendChild(script);
于 2013-03-20T10:54:29.380 回答
3 
$(function(){
    var width = $(document).width(),
        mobile = 500;

    if (width > mobile) {
        $('head').append('<script class="desktop" type="text/javascript" src="js/jquery_computer.js"></script>');
        $('head').find('.mobile').remove();
    } 
    else
    {
        $('head').append('<script class="mobile" type="text/javascript" src="js/mobile_version.js"></script>');
        $('head').find('.desktop').remove();
    }
});

只需使用 if else 来检测条件并在脚本元素上使用类可能会有所帮助

于 2015-01-14T07:54:43.657 回答
2

如果你愿意，你可以使用异步import()。

import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')

在从常规<script type="module">加载的模块中或在脚本标记中，您还可以在最新（实验性）浏览器中使用顶级等待import()<script>

<script type="module">
  await import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')      
</script>

但它不适用于每个脚本。

  • 一个常见的原因是那些添加闭包的 UMD 模块捆绑器，
    (function(global){...}(this))因为this在模块中未定义。
  • 第三方脚本需要启用 CORS 才能加载
  • 在IE中不起作用，但无论如何它已经死了
  • 查看其他已知差异
于 2020-12-03T23:53:53.537 回答
1

你可以$.getScript在 jQuery中使用

详情见这里

于 2013-03-20T10:50:03.817 回答