- IE8+,Firefox,Chrome,Opera,Safari 等現代瀏覽器普遍支持data URL
- IE8 data URL 最大長度限制爲32k字節,超出無效。IE9+沒有這個限制
- IE只識別base64編碼或百分號編碼(URL編碼, encodeURIComponent)的data URL,IE不識別無編碼的data URL,非IE瀏覽器可識別無編碼的data URL
- IE不支持對<iframe>,<frame>標籤的src設置data URL
- IE官方說法說data URL僅支持以下5種使用場景:
- object (images only)
- img
- input type=image
- link
- CSS declarations that accept a URL
- object (images only)
- 據本人實測,IE也在除了官方所述5種之外的其它場合支持data URL:
- a href
- meta refresh. 示例:
<meta http-equiv="refresh" content="5;URL=data:text/html;base64,xxxx....">
- script src
- window.open
- embed src
- 對於audio, video一類的元素,往往資源文件較大,使用data URL並不常見,我也沒有對其進行測試。
- Firefox中粘貼截圖是直接轉換爲data URL的圖片,其它瀏覽器乾脆無法粘貼,我記得以前Chrome好像可以粘貼截圖的,今天再測Chrome,Opera都不能粘貼截圖(<div contenteditable></div>做的測試). (粘貼截圖常用於在線富文本編輯器)
- 可爲data URL指定字符集編碼。示例:data:text/plain;charset=US-ASCII,xxxx....
附錄:
DataURL語法規則:
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data mediatype := [ type "/" subtype ] *( ";" parameter ) data := *urlchar parameter := attribute "=" value
DataURL規範:rfc2397
維基百科詞條:Data URI scheme
最好的在線生成DataURL網站:Data Url Maker 頁面簡潔,支持文件拖放,支持對指定網址的CSS文件做data URL優化。