JSP 頁面引入 JS 文件後顯示空白的排查與解決

問題現象

JSP 頁面引入外部 JS 文件後，瀏覽器顯示空白。但開發者工具 Network 面板顯示 JS 已成功加載，且能在 Sources 面板查看源碼。移除 JS 引用後頁面恢復正常。

核心原因

JS 代碼中調用了 document.write() 或 document.writeln()，且調用時機在頁面文檔流已關閉之後（如 window.onload、異步回調、延遲執行中）。

原理解析

• document.write() 在文檔解析階段調用時，會向當前文檔流寫入內容
• 若在文檔解析完成後（document.readyState === 'complete'）調用，會隱式調用 document.open()，導致當前文檔被清空並重新開始寫入
• 結果：原有 HTML 內容被擦除，只剩 JS 寫入的新內容（若無新寫入則顯示空白）

代碼示例

// 問題代碼：外部 test.js
window.onload = function() {
    document.write("動態生成內容"); // 此時文檔已關閉，導致頁面清空
};

// 或異步加載場景
$.getScript("test.js", function() {
    document.write("..."); // 同樣導致頁面清空
});

解決方案

方案一：替換為 DOM 操作（推薦）

// 修正後
window.onload = function() {
    var div = document.createElement('div');
    div.textContent = "動態生成內容";
    document.body.appendChild(div);
    // 或使用 innerHTML
    // document.getElementById('container').innerHTML = "...";
};

方案二：確保在文檔解析階段執行

<script src="test.js"></script> 
<!-- 放在 body 末尾，或在文檔中直接內聯 -->

但這不利於代碼維護和緩存，不推薦作為長期方案。

方案三：檢查第三方庫

若引入的是第三方 JS（如廣告 SDK、統計代碼），請檢查其文檔或聯繫提供方，確認是否存在 document.write 用法，尋找異步加載替代方案。

調試技巧

1. 在 Console 執行 document.write.toString() 確認是否被重寫
2. 在 JS 文件開頭加入 console.log('JS loaded') 驗證加載順序
3. 使用 document.currentScript 定位當前腳本標簽位置

總結

現代 Web 開發應完全避免使用 document.write()。改用 DOM API（createElement、appendChild、innerHTML、insertAdjacentHTML）進行動態內容插入，既安全又符合現代瀏覽器渲染機制。