JavaWeb AJAX 返回 document.write 導致 Firefox 持續加載旋轉的根因與一行代碼修復

JavaWeb AJAX 返回 document.write 導致 Firefox 持續加載旋轉的根因與一行代碼修復

現象：AJAX 成功返回 HTML 片段，JS 執行 document.write(responseText) 後，頁面內容正常顯示，但 Firefox 標籤頁持續顯示「加載中」旋轉圖標，Console 無報錯。

一、 根因：文檔流未關閉

• 瀏覽器解析 HTML 時會打開一個「文檔輸入流」
• document.write() 向該流寫入內容
• 正常頁面加載完成後，瀏覽器自動關閉流（觸發 DOMContentLoaded、load 事件）
• AJAX 回調中調用 document.write() 會隱式 document.open() 打開新流，覆蓋原文檔
• 若不顯式調用 document.close()，Firefox 認為文檔仍在加載中，持續旋轉
• Chrome/Edge 容錯性較好，可能自動關閉，但不符合標準

二、 一行代碼修復

// AJAX 成功回調中
document.write(responseText);
document.close();  // 【關鍵】顯式關閉文檔流，通知瀏覽器加載完成

三、 完整最佳實踐模板

$.ajax({
    url: '/api/content',
    method: 'GET',
    success: function(html) {
        // 1. 寫入新內容
        document.write(html);
        // 2. 必須關閉流
        document.close();
        // 3. (可選) 手動觸發頁面級事件，確保第三方庫初始化
        window.dispatchEvent(new Event('load'));
        document.dispatchEvent(new Event('DOMContentLoaded'));
    },
    error: function(xhr) {
        // 錯誤處理：恢復原頁面或提示
        document.write('加載失敗：' + xhr.status);
        document.close();
    }
});

四、 替代方案：避免 document.write（推薦）

document.write 會覆蓋整個文檔，破壞原有 DOM、事件綁定、CSSOM，副作用大。現代開發建議：

// 容器元素替換 innerHTML
$('#container').html(responseText);
// 或原生
document.getElementById('container').innerHTML = responseText;
// 配合 script 標籤手動執行（innerHTML 不執行 script）
const scripts = container.querySelectorAll('script');
scripts.forEach(s => eval(s.textContent)); // 或動態創建 script 標籤

五、 版本差異說明

• Firefox 早期版本（<57）嚴格執行 HTML 標準，流未關閉持續 loading
• Firefox Quantum (57+) 行為一致，但部分用戶反饋「不復現」，可能因快取/網絡時序導致流自動關閉，不可依賴
• Chrome/Safari/Edge 歷史版本較寬容，但標準要求顯式 close

六、 總結

凡用 document.write，必配 document.close()。 否則 Firefox 標籤頁永久旋轉，用戶以為頁面卡死。現代項目請棄用 document.write，改用 DOM API 精準替換局部內容。