Html 有条件地加载 JavaScript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15521343/
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
Conditionally load JavaScript file
提问by user2190308
I need a JS statement that determine which JavaScript file to use.
我需要一个 JS 语句来确定要使用哪个 JavaScript 文件。
I have one file:
我有一个文件：
<script type="text/javascript" src="js/jquery_computer.js"></script>
But when the screen width is less than 500px, I want load another file instead:
但是当屏幕宽度小于 500px 时，我想加载另一个文件：
<script type="text/javascript" src="js/mobile_version.js"></script>
I have tried everything and it is not working.
我已经尝试了一切，但它不起作用。
回答by mattytommo
You'd have to create that markup yourself in JS. Something like this:
您必须自己在 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);
回答by T.J. Crowder
If you want the script loaded asynchronously, the other answers here do that.
如果您希望异步加载脚本，这里的其他答案就是这样做的。
If you want it loaded synchronouslywith page load, this is one of the very, very few remaining valid uses cases for document.write:
如果您希望它与页面加载同步加载，这是非常非常少的剩余有效用例之一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>
(I've removed typebecause JavaScript is the default, specifying it isn't useful.)
（我已经删除了，type因为 JavaScript 是默认的，指定它没有用。）
回答by The Alpha
Maybe you can use matchMedia.jsand can load a script using jQuery.getScript
也许你可以使用matchMedia.js并且可以加载使用脚本jQuery.getScript
$(function(){
if (matchMedia('only screen and (max-width: 500px)').matches) {
$.getScript(...);
}
});
回答by fadomire
Best would be to use built-in matchMedia API.
最好是使用内置的 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);
Drawback is that it is not supported in IE < 10
缺点是 IE < 10 不支持
回答by user3755768
$(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();
}
});
just use if else to detect condition and use class on script element may be it help
只需使用 if else 来检测条件并在脚本元素上使用类可能会有所帮助
回答by filmor
You don't need jQuery for this, it suffices to create the <script>tag in the DOM dynamically:
为此，您不需要 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);
