4

我需要这样简单的东西：

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

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

但我需要<script src="js.js"></script>附加而不是重定向<head></head>

那可能吗？

4

3 回答 3

16

看看它的实际效果：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");

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

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

于 2013-06-10T11:01:28.407 回答
5

您可以创建一个脚本元素并设置其 src 属性，然后将其附加到文档的头部

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

如果想支持 IE < 9则不要document.head使用document.getElementsByTagName('head')[0]

于 2013-06-10T10:57:48.440 回答
1

使用yepnope你可以做类似的事情

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

它会自动附加文件

于 2013-06-10T11:09:31.597 回答