代码在JSFiddle中隔离时可以工作，但在站点时给出错误

code works when isolated in JSFiddle but gives error when in site

本文关键字：站点 出错 错误 JSFiddle 隔离 代码 工作      更新时间：2023-09-26

我把我的代码复制到JS Fiddle中，它开始工作得很好。没有错误。

我试图用unicode符号替换某些单词，如果@supports查询的值为true。我如何检查它的计算结果是否为true，是通过检查是否应用了只有它可以写的样式。

我得到的错误是

Uncaught TypeError: Cannot read property 'style' of undefined

但是当我在JS中使用相同的资产时，我没有得到任何错误。

这里是JS提琴的链接:http://jsfiddle.net/VJm6r/

代码如下:

if(document.getElementsByTagName('body')[0].style.zIndex === 0){
//ligatures and @supports supported
}
else{
   //ligatures and @supports not supported
    $(document).ready(function(){
    var map = {
        "About": { regex: /About/g, replacement: "&#xe00f" },
        "Work": { regex: /Work/g, replacement: "&#xe010" },
        "CV": { regex: /CV/g, replacement: "&#xe00c" },
        "Resume": { regex: /Resume/g, replacement: "&#xe00e" },
        "down": { regex: /down/g, replacement: "&#xe00d" },
        "Mail": { regex: /Mail/g, replacement: "&#xe011" },
        "Dribbble": { regex: /Dribbble/g, replacement: "&#xe015" },
        "Facebook": { regex: /Facebook/g, replacement: "&#xe013" },
        "GooglePlus": { regex: /GooglePlus/g, replacement: "&#xe012" },
        "Twitter": { regex: /Twitter/g, replacement: "&#xe014" }
    }
    $('.nav a').each(function () {
        var obj = $(this);
        var html = $(this).html();
        obj.html(html.replace(map[html].regex, map[html].replacement));
    });
});
}

如果您的代码在<head>中，document.getElementsByTagName('body')[0]将返回undefined，因为主体尚未被解析。建议的修复:将整个脚本移动到正文的末尾(就在</body>之前)。

您需要等到创建了body元素之后。getElementsByTagName("body")返回一个空的HTML集合。[0]返回undefined，它没有style属性。您可以将所有内容用$(document).ready包装或移动到页面底部。严格地说，您可以将它移到<body>标记之后，但前两个选项之一是更常见的做法。

您的jsFiddle将所有内容包装在$(window).load中，这就是它在那里工作的原因。

当页面仍在加载时，javascript正在运行。当行document.getElementsByTagName('body')[0]运行时，主体还没有机会加载，所以它返回undefined，因为没有找到任何东西。相反，您需要将代码移动到文档的底部，在正文之后，或者在页面加载了jQuery和$(document).ready(function() {/*MY CODE HERE */};

之后运行它。
相关文章：