IE8 下調試報錯,IE9+ 正常。截圖顯示變量 yellowD 相關錯誤。
| 問題 | IE8 表現 | 標準/現代瀏覽器 | 解決方案 |
|---|---|---|---|
| console.log | 未打開開發者工具時 console 未定義 | 始終存在 | 封裝 window.console = window.console || {log: function(){}} |
| JSON 對象 | 無原生 JSON.parse/stringify | 原生支持 | 引入 json2.js (Douglas Crockford) |
| Array 方法 | 無 indexOf, forEach, map, filter | ES5 全支持 | 引入 es5-shim.js 或手寫 polyfill |
| DOM 選擇 | 無 querySelector/querySelectorAll | 支持 | 用 getElementById/getElementsByTagName 或 Sizzle/jQuery |
| 事件模型 | attachEvent、event.srcElement、無 event.target | addEventListener、event.target | 統一封裝 on/off 函數 |
| 內聯事件屬性 | 變量提升不同、this 指向 window | 符合規範 | 避免內聯 onclick="...",用 JS 綁定 |
| HTML5 元素 | 不識別 section, article, header... 無樣式 | 正常 | document.createElement(tag) 創建一次 + html5shiv.js |
var yellowD = ... 是否在函數作用域外?IE8 對未聲明變量賦值會創建全局屬性,但嚴格模式下報錯。yellowD = document.getElementById('yellowD') — ID 是否唯一?HTML 中是否存在該元素?<head> 中執行,導致 DOM 未就緒?移至 <body> 底部或用 window.onload。yellowD 非保留字,但檢查是否與框架內部變量衝突。// IE8 安全日誌
function log() {
if (window.console && console.log) {
console.log.apply(console, arguments);
}
}
// 變量檢查
log('yellowD 類型:', typeof yellowD);
log('yellowD 值:', yellowD);
if (yellowD && yellowD.nodeType === 1) {
log('是 DOM 元素, tagName:', yellowD.tagName);
} else {
log('非 DOM 元素或未獲取到');
}
es5-shim.min.js + es5-sham.min.js + json2.min.js + html5shiv.min.js (條件註釋載入)。IE8 錯誤多源於 **缺失 ES5/DOM API**、**事件模型差異**、**腳本執行時序**。優先引入 Polyfill 库,再用 typeof/console.log 定位具體變量問題。