ECMA-262標準第5版已經內建了JSON對象,最新的瀏覽器都已經支援了,但老的瀏覽器還未完全退出市場,不能完全忽略。
在地球被HTML5完全佔領之前,測試一下各瀏覽器(主要是IE8)對內建 window.JSON 的支援情況,順便也測了一下Box Model盒模型。
首頁面代碼:index.html
<html><head></head><body><script type="text/javascript" src="test.js"></script><hr /><iframe src="DOCTYPE-less.html"></iframe><iframe src="EmulateIE7 without DOCTYPE.html"></iframe><iframe src="EmulateIE7 with HTML5 DOCTYPE.html"></iframe><iframe src="HTML5.html"></iframe><iframe src="XHTML 1.0 Strict.html"></iframe><iframe src="XHTML 1.0 Transitional.html"></iframe><iframe src="XHTML 1.1.html"></iframe><iframe src="HTML 4.01 Strict.html"></iframe><iframe src="HTML 4.01 Transitional.html"></iframe></body></html>
指令碼代碼:test.js
function print(text, style) { var div = document.createElement('div'); div.innerHTML = text; div.style.cssText = style; document.body.appendChild(div);}function testBoxSizing() { var div = document.createElement('div'); div.style.cssText = 'float: left; width: 200px; border-right: 100px solid red; background: green; color: yellow;'; div.innerHTML = 'box sizing test'; document.body.appendChild(div);}document.write('<style>body{margin:5px;font-size:12px;}iframe{width:100%;height:70px;}hr{clear:both}</style>');var doctype = document.doctype || document.firstChild;print(/[^\\\/]+$/.exec(decodeURI(window.location)), 'color: blue;');print('DOCTYPE/publicId: ' + (doctype.publicId || doctype.nodeValue || '(N/A)'), 'color: gray;');print('navigator: ' + window.navigator.userAgent, 'color: gray;');print('document.documentMode: ' + document.documentMode, 'float: left; width: 200px; color: green;');print('window.JSON: ' + window.JSON, 'float: left; width: 200px; color: red;');testBoxSizing();
DOCTYPE-less.html
<html><head></head><body><script type="text/javascript" src="test.js"></script></body></html>
EmulateIE7 without DOCTYPE.html
<html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /></head><body><script type="text/javascript" src="test.js"></script></body></html>
EmulateIE7 with HTML5 DOCTYPE.html
<!DOCTYPE HTML><html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /></head><body><script type="text/javascript" src="test.js"></script></body></html>
HTML5.html
<!DOCTYPE HTML><html><head></head><body><script type="text/javascript" src="test.js"></script></body></html>
剩下幾個檔案的代碼合并到一起貼了,只是DTD部分不同而已(還有一些基本沒啥用的DTD就不用測了):
XHTML 1.0 Strict.html
XHTML 1.0 Transitional.html
XHTML 1.1.html
HTML 4.01 Strict.html
HTML 4.01 Transitional.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head></head><body><script type="text/javascript" src="test.js"></script></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head></head><body><script type="text/javascript" src="test.js"></script></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><head></head><body><script type="text/javascript" src="test.js"></script></body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head></head><body><script type="text/javascript" src="test.js"></script></body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><script type="text/javascript" src="test.js"></script></body></html>
在Windows XP SP3/IE8中(IE8模式)測試如下:
測試後可得出結論:
在IE8中:
當HTML頁面指定了DOCTYPE,並且瀏覽器模式為IE8時,才支援內建的window.JSON對象。
當指定了DOCTYPE的頁面強制使用IE7模式或者IE8相容模式時,都不支援內建的window.JSON對象。
當未指定DOCTYPE時,document.documentMode為5,可以理解為IE5模式/怪異模式(quirks mode),此時不支援內建的window.JSON對象。
當瀏覽器為IE5模式/怪異模式時,元素的盒模型為元素尺寸包含邊框和內邊框尺寸(對應的css為box-sizing: border-box,不過IE8及更低版本貌似不支援);IE7或者IE8模式均為“標準模式的盒模型”(對應css為box-sizing: content-box)。
PS:其它現代瀏覽器都支援window.JSON了,對於IE這種“近代”瀏覽器來說,請使用前往http://www.json.org/參考json2.js。
參考資料:
W3C QA - Recommended list of Doctype declarations you can use in your Web document
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Document Type Declaration - Wikipedia, the free encyclopedia
http://en.wikipedia.org/wiki/Doctype
documentMode Property: http://msdn.microsoft.com/en-us/library/cc196988(VS.85).aspx
HTML DOM Document documentMode Property http://www.w3schools.com/jsref/prop_doc_documentmode.asp
JSON http://www.json.org/
Standard ECMA-262
http://www.ecma-international.org/publications/standards/Ecma-262.htm
關於 doctype 的讀取
http://qbaok.blog.163.com/blog/static/10129265201092654046664/