【问题标题】:appending <script src=""></script> to head based on screen width根据屏幕宽度将 <script src=""></script> 附加到 head
【发布时间】:2013-06-06 00:15:40
【问题描述】:

我需要这样简单的东西:

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

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

但我需要将&lt;script src="js.js"&gt;&lt;/script&gt; 附加到&lt;head&gt;&lt;/head&gt; 中而不是重定向

这可能吗?

【问题讨论】:

    标签: javascript jquery append


    【解决方案1】:

    您可以 createscript 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]

    【讨论】:

    • 这会正确附加它,但无论如何(即使在 768px 宽度下)。这是我的脚本:
    【解决方案2】:

    查看实际操作: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”解决方案,请查看 this answer 了解跨浏览器替代方案。

    【讨论】:

    • 我也试过这个..但它不起作用..这是我的脚本
    • @omegaiori:也许是因为您似乎将参数命名为“pathToscript”(小写“s”),然后尝试将其用作“js.src = pathToScript”(大写-案例's')。 (这是我的回答中的一个错字 - 我会修复它 - 抱歉。)如果这不能解决问题,请尝试使用您的开发者控制台查看问题所在。
    • 好的,但是“if (screen.width >= 768)”被忽略了,脚本在任何情况下都会被附加。控制台什么也没说(“CSS 用法:初始化扩展”)
    • 尝试在您的 if 语句之前添加 alert(screen.width);。它报告了什么?
    • 它说 1366px 即使浏览器被拉伸到小于 1366 .. 我想这就是它总是附加它的原因。我应该将其更改为 window.size 还是什么?
    【解决方案3】:

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

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

    它会自动追加文件

    【讨论】:

    • Yepnope.js 很棒,而且可以独立使用,如果您只需要在文件之间进行选择。
    • 我可以帮忙吗?我很想让 yepnope 脚本工作。这是我的代码,但它没有附加任何内容。我究竟做错了什么?谢谢!
    • 谢谢你帮助艾哈迈德,但脚本似乎只适用于 "" 或 ">=" 无论如何,我得到 附加.. 但我需要的是
    • 确定删除警报并将其替换为启动粘滞面板的代码,它将起作用
    • 实际上 initiaziles stickypanel 在另一个 .js 中是什么 - 这是强制性的吗?不仅仅是它不起作用,它可能不起作用,因为没有附加任何内容。很抱歉打扰您,但如果您能提供帮助,那就太好了:)
    猜你喜欢
    • 2014-05-21
    • 1970-01-01
    • 2011-08-16
    • 1970-01-01
    • 1970-01-01
    • 2012-03-26
    • 1970-01-01
    • 1970-01-01
    • 2012-08-24
    相关资源
    最近更新 更多