响应式或设备有条件地加载 JavaScript 文件

Question

我正在为我的项目尝试此代码，但它不适合我

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);

Conditionally load JavaScript file

链接失效

http://itracktraining.com/sam.html

新变化，与上述演示链接相同

这似乎不起作用 我也尝试调用多个 jqueryfile 和一个函数 :)

$(document).ready(function() {
                var width = $(document).width()
    var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if (width > 800)
{
    js.src = "js/jquery.slimscroll.min.js";
    js.src = "js/jquery.fullPage.js";
    js.src = "js/examples.js";
    $('#fullpage').fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage'],
                sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
                css3: true
            });
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);

});

Answer 1

在您的代码中，未定义元素 head。您需要添加以下行：

var head = document.getElementsByTagName('head')[0];

在脚本的开头。

此外，您似乎缺少 screen 变量。您可以将screen.width 与window.innerWidth 交换。

jsfiddle.net/syLzb4yL 上的完整工作示例。

---

编辑问题的答案可以在here找到。