JSP页面加载时调用JS拉取DB数据失败，仅点击事件生效首页空白如何解决

问题根因 #

你为首个<td>标签绑定的onload事件不生效，onload仅支持<body>、<img>、<script>、<iframe>这类可以独立加载外部资源的DOM元素，表格单元格<td>没有独立的加载完成事件，所以页面加载时你要的displayOnglet('0')逻辑根本不会执行，自然首屏没有数据。

修复方案 #

方案1：绑定body的onload事件触发 #

直接修改页面的<body>标签，增加加载完成后触发首个选项卡加载的逻辑：

<body onload="displayOnglet('0')">

同时删除你给第一个<td>加的无效onload属性即可。

方案2：在页面底部加JS逻辑触发 #

如果不想修改body标签的属性，可以在页面</body>标签前增加以下内嵌JS代码，等DOM渲染完成后自动调用：

<script>
window.onload = function() {
    // 先判断产品线列表非空再执行，避免空指针报错
    <% if(vProductLine.size() > 0) { %>
        displayOnglet('0');
    <% } %>
}
</script>

方案3：用DOMContentLoaded事件（性能更好） #

该事件不需要等页面所有图片、样式等资源全部加载完成，只要DOM结构渲染完毕就会触发，首屏显示速度更快：

<script>
document.addEventListener('DOMContentLoaded', function() {
    <% if(vProductLine.size() > 0) { %>
        displayOnglet('0');
    <% } %>
});
</script>

代码优化建议 #

你当前的代码里，i=0和i≠0的两个分支，<td>内部的结构完全一致，重复冗余，可以简化为以下代码：

<% for(int i=0;i<vProductLine.size();i++){
    String activeClass = nOnglet.equals(""+i) ? "ongletActif" : "ongletInactif";
    String clickEvent = i == 0 ? "" : "onclick=\"displayOnglet('"+i+"')\"";
%>
<td id="onglet<%= i %>" class="<%= activeClass %>" <%= clickEvent %>>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr><td nowrap align="center"><b><j2ee:text id="xmlFile" tag="<%= vProductLine.elementAt(i).toString() %>"/></b></td></tr>
        <tr><td align="center"><span id="obj_<%= vProductLine.elementAt(i) %>"></span></td></tr>
    </table>
</td>
<% } %>

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