Question

我需要这样简单的东西：

<script type="text/javascript">
<!--

if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>

但我需要<script src="js.js"></script>附加<head></head>

，而不是重定向

可能吗？

Answer 1

查看实际操作： Short Demo

您可以定义一个函数，如下所示：

function appendScript(pathToScript) {
    var head = document.getElementsByTagName("head")[0];
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.src = pathToScript;
    head.appendChild(js);
}

然后使用适当的参数（例如根据屏幕大小）调用它，如下所示：

appendScript("path/to/file.js");

如果您还需要从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;
        }
    }
}

然后使用适当的参数（例如根据屏幕大小）调用它，如下所示：

removeScript("path/to/file.js");

另请注意，使用screen.width会返回用户屏幕的大小（而不是浏览器窗口的宽度）。

如果需要获取窗口大小，可以使用$(window).width()（使用jQuery）。如果您想要一个“jQuery-free”解决方案，请查看 this answer 以获取跨浏览器的替代方案。

Answer 2

您可以create script element并设置其src属性，然后append将其设置为文档的head

var script = document.createElement('script');
script.src = 'js.js';
document.head.appendChild(script)

if wants to support IE < 9然后代替document.head使用document.getElementsByTagName('head')[0]

Answer 3

使用yepnope，您可以执行类似

的操作

yepnope([{
    test: 768 >= screen.width // devices 768 and up
  , yep: [ "site/js/jquery.stickyPanel.min.js" ]
  , complete: function () { alert('complete'); }
}]);

它会自动附加文件

根据屏幕宽度将<script src =“”> </script>附加到头部

3 个答案: