Question

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

我有一个文件：

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

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

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

我已经尝试了一切，但它无法正常工作。

Answer 1

你必须自己在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);

Answer 2

也许您可以使用matchMedia.js并使用jQuery.getScript

加载脚本

$(function(){
    if (matchMedia('only screen and (max-width: 500px)').matches) {
        $.getScript(...);
    }
});

Answer 3

最好使用内置的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＆lt; 10

Answer 4

如果您要异步加载脚本，则此处的其他答案都可以这样做。

如果您希望它随页面加载同步加载，这是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是默认设置，表示它没有用。）

Answer 5

$(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来检测条件并在script元素上使用class 可能有帮助

Answer 6

你可以在jQuery中使用$.getScript

see here 了解详情

Answer 7

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

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

Answer 8

如果愿意，可以使用异步/home/[username]/.config/Google/AndroidStudio4.1。

import()

在带有import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')的脚本标签中，或在从常规<script type="module">加载了import()的模块中，您都可以在最新的（实验性）浏览器中使用顶级等待功能

<script>

但这不适用于所有脚本。

一个常见的原因是那些UMD模块捆绑器添加了闭包
<script type="module"> await import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js') </script>，因为模块中未定义(function(global){...}(this))。
第三方脚本需要启用CORS才能加载
无法在IE中运行，但还是死了
查看其他known differences

有条件地加载JavaScript文件

8 个答案: