javascript 根据屏幕宽度将 <script src=""></script> 附加到头部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17022222/
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
appending <script src=""></script> to head based on screen width
提问by valerio0999
i need something easy like this:
我需要这样简单的东西：
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
but instead of a redirect i'd need <script src="js.js"></script>to be appended in <head></head>
但不是重定向，我需要<script src="js.js"></script>附加在<head></head>
is that possible?
那可能吗？
回答by gkalpak
See it in action: Short Demo
看看它在行动： Short Demo
You can define a function, like this:
您可以定义一个函数，如下所示：
function appendScript(pathToScript) {
var head = document.getElementsByTagName("head")[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.src = pathToScript;
head.appendChild(js);
}
And then call it with the appropriate argument (e.g. according to screen size), like this:
然后使用适当的参数（例如根据屏幕大小）调用它，如下所示：
appendScript("path/to/file.js");
If you also need to remove a script from head(e.g. based on its 'src' attribute), you can define a function, like this:
如果您还需要从中删除脚本head（例如基于其 'src' 属性），您可以定义一个函数，如下所示：
function removeScript(pathToScript) {
var head = document.getElementsByTagName("head")[0];
var scripts = head.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
var js = scripts[i];
if (js.src == pathToScript) {
head.removeChild(js);
break;
}
}
}
And then call it with the appropriate argument (e.g. according to screen size), like this:
然后使用适当的参数（例如根据屏幕大小）调用它，如下所示：
removeScript("path/to/file.js");
Also, note that using screen.widthreturns the size of the user's screen (not the browser-window's width).
另外，请注意 usingscreen.width返回用户屏幕的大小（而不是浏览器窗口的宽度）。
If you need to get the window size you can use $(window).width()(using jQuery).
If you want a "jQuery-free" solution, take a look at this answerfor cross-browser alternatives.
如果您需要获取可以使用的窗口大小$(window).width()（使用 jQuery）。如果您想要一个“无 jQuery”的解决方案，请查看跨浏览器替代方案的答案。
回答by Arun P Johny
You can createa script elementand set its src property then appendit to the headof the document
您可以创建一个脚本元素并设置其 src 属性，然后将其附加到文档的头部
var script = document.createElement('script');
script.src = 'js.js';
document.head.appendChild(script)
if wants to support IE < 9then instead of document.headuse document.getElementsByTagName('head')[0]
如果要支持 IE < 9，则不要document.head使用document.getElementsByTagName('head')[0]
回答by Ahmad Alfy
Using yepnopeyou can do something like
使用yepnope你可以做类似的事情
yepnope([{
test: 768 >= screen.width // devices 768 and up
, yep: [ "site/js/jquery.stickyPanel.min.js" ]
, complete: function () { alert('complete'); }
}]);
And it will append the file automatically
它会自动附加文件
