Edge下Cannot read properties of undefined (split)报错修复

报错直接原因是执行x.split("|")时，入参x为undefined，本质是IE和现代浏览器的DOM实现差异，叠加代码本身的结构bug：

• IE11存在非标准DOM实现：会自动将<td>等普通非表单标签上编写的value自定义属性，映射到DOM元素的value属性上，因此旧代码中this.value可以正常读取到拼接的参数字符串
• Edge基于Chromium内核，严格遵循W3C标准规范：只有<input>、<select>、<textarea>这类表单元素原生支持value属性，普通<td>元素直接读取this.value会返回undefined，调用字符串方法自然抛出类型错误
• 额外的结构bug：PHP渲染代码中连续输出了两个未闭合的<td>起始标签，会导致浏览器自动修正DOM结构时出现事件绑定错位，进一步加剧兼容性问题。

1. 修正PHP渲染逻辑 #

删除重复输出的多余<td>标签，统一使用标准data-*自定义属性存储跳转参数，不要给非表单元素使用非标准的value属性传参。修改后的PHP代码片段如下：

if(($y >= 32 || $y >= $endLast) && $x < $endRowColorCoding){
    // 删除之前重复的bdata类td输出行，仅保留一个合法td标签
    echo "<td class='data$sub' id='trgt$t' onClick='openBreakdown(this.dataset.value)' data-value='$year$mnth|$varname[$x]|$rprt' title='$year$mnth|$varname[$x]|$rprt'>";
    echo $val[$y][$x];                          
    $csv .= $val[$y][$x].",";
    if($y == 0 || $y == 4  || $y == 5 || $y == 9 || $y == 10 || $y == 14 || $y == 15 || $y == 31 || $y == 19 || $y == 45 || $reportDuration[$y] == 'qtd' || $reportDuration[$y] == 'mtd'){
        $csv .= ",";
    }
    echo "</td>";
}

2. 给JS函数加入参兜底校验 #

在openBreakdown函数开头增加参数合法性判断，避免后续因参数异常抛出阻断性错误，修改后的JS代码如下：

var newWindow;
function openBreakdown(x){
    // 入参合法性校验
    if (typeof x !== 'string' || !x.includes('|')) {
        console.error('跳转参数无效', x);
        return;
    }

    var data = x.split('|');
    var mnth = data[0]; // 对应月份，一月从索引7开始
    var typx = data[1]; // 报表类型：downtime %、mttr、mtbi、longdown等
    var rprt = data[2]; // 报表周期类型：y、q、m、w
    
    if(typx == 'tldw'){
        newWindow = window.open("kpi_breakdown.php?month="+mnth+"&type="+typx+"&rprt="+rprt, "_blank", "location=no, toolbar=no, scrollbars=yes, resizable=yes, top=80, left=310, width=450, height=800");
    } else {
        newWindow = window.open("kpi_breakdown.php?month="+mnth+"&type="+typx+"&rprt="+rprt, "_blank", "location=no, toolbar=no, scrollbars=yes, resizable=yes, top=80, left=310, width=900, height=800");
    }
}

修改完成后清空浏览器缓存刷新页面即可生效：

• dataset是W3C标准的自定义属性读取API，所有现代浏览器（Edge、Chrome、Firefox等）均完美支持，不存在兼容问题
• 修复重复td标签后DOM结构符合规范，不会出现事件绑定错位问题
• 入参校验可以避免后续因参数传错导致的脚本阻断问题

内容的提问来源于stack exchange，提问作者user18731018