有条件地加载JavaScript文件

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

为此，您不需要 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);

Answer 6

你可以$.getScript在 jQuery 中使用

详情请参见此处