家谱网站加载交互异常：Firefox正常，Chrome显示空白页求助

你的代码里存在几个关键JavaScript错误，导致Chrome严格执行脚本时失败，而Firefox容错性更高所以能正常运行：

错误点分析 #

• 拼写错误：ocument.getElementById('tree') 缺少开头的字母'd'，正确写法是document.getElementById('tree')
• 未定义变量：代码中使用了dump变量，但从未声明或赋值，实际应该操作之前获取的tree元素
• 冗余逻辑：同时使用hidden属性和修改display样式，虽不报错但可简化

修正后的代码 #

HTML（可保留原代码，建议移除多余前缀） #

<body onload='show();'> 
  <div id='loader'>...<img ...></div> 
  <div id='tree' class='hidden'>... tree ...</div>
</body>

CSS（无需修改） #

.hidden {display: none;}

JavaScript（修正错误） #

function show()
{
   let temp = document.getElementById('loader');
   let tree = document.getElementById('tree'); // 修正拼写错误
   temp.hidden = true;
   tree.hidden = false; // 替换未定义的dump为tree
   tree.style.display = 'block';
   // 更简洁的替代方案：用class控制显示隐藏
   // temp.classList.add('hidden');
   // tree.classList.remove('hidden');
}

问题原因 #

Chrome对JavaScript错误的处理更严格，当脚本中出现拼写错误或未定义变量时，会直接终止脚本执行，导致show()函数没有完成切换显示的操作，家谱的tree元素一直处于隐藏状态，所以页面显示空白。而Firefox对这类错误的容错性更高，会尝试继续执行后续代码，因此能正常显示家谱。

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