html5test

時間 2019-11-18

標籤 html5test html test 欄目 HTML 简体版

原文原文鏈接

html5test

Github
https://github.com/NielsLeenheer/html5testjavascript

主程序是 scripts/7/engine.jsphp

目前看到的分類大部分是基於判斷該對象是否存在來判斷的.
好比響應式圖片支持, 多媒體輸入的支持, Drag Drop交互, ContentEditable, HTML5的新Histroy對象, 安全對象 crypto, Geolocation定位支持, HTML5的通訊, 包括Beacon, SSE.Promise,全屏, JSON, 通知.html

也有一些不是根據這樣的原理.
好比是否支持html5

對於SVG Math標籤根據namespaceURI判斷java

整體上分爲下面幾類測試git

語義類:

parsing解析文檔方式: 是否支持 <!DOCTYPE html>觸發標準模式, 這個是根據文檔對象的compatMode的值來判斷的.
測試是否支持html5的元素 testElements testForm(html5表單元素)
MIcrodatagithub

離線存儲

testOffline 測試appcache
testStorage 測試localStorage sessionStorage
testFiles 測試fileReader dataURL objectURLweb

設備訪問

testGeolocation 定位支持
testOutput 全屏支持通知
testInput 用戶攝像頭麥克風等做爲信息輸入 getUserMedia(已棄用)ajax

通信

testCommunication 測試Beacon SSE fetch
testWebRTC RTC(網頁即時通信音頻視頻等)chrome

多媒體

audio video

3D& 特效

testResponsive 響應式圖片
testCanvas testWebGL
testAnimation 元素原生animate函數支持

交互

testInteraction 拖拽支持
testSecurity crypto 和 csp策略支持

其餘

testOther onerror base64 encoding的支持

html5test原理

<!DOCTYPE html> triggers standards mode

document.compatMode == 'CSS1Compat' 爲true便可

document.compatMode 有兩個值 BackCompat和CSS1Compat
BackCompat Standards-compliant mode is not switched on. (Quirks Mode) 標準兼容模式關閉
CSS1Compat Standards-compliant mode is switched on. (Standards Mode) 標準兼容模式開啓

判斷SVG Math的支持

大部分的元素的namespaceURI 都是http://www.w3.org/1999/xhtml
SVG
element.namespaceURI == 'http://www.w3.org/2000/svg'
Math
element.namespaceURI == 'http://www.w3.org/1998/Math/MathML'

響應式圖片支持

這是一個新的標籤Picture

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

<img class="image" src="mm-width-128px.jpg"
     srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">

關於sizes
sizes="100px" 表示這個圖片將以100px的寬度顯示
sizes="(min-width: 33em) 33em, 100vw"
視口寬超過 33em 嗎？那這張圖將會是 33em 寬。不然它會是 100vw 寬。

Window中應該有HTMLPictureElement()方法支持srcset sizes屬性

'HTMLPictureElement' in window
'srcset' in document.createElement('img') 
'sizes' in document.createElement('img')

Canvas支持

(canvas.getContext && typeof CanvasRenderingContext2D != 'undefined' && canvas.getContext('2d') instanceof CanvasRenderingContext2D)

canvas text支持 canvas.getContext('2d').fillText == 'function'
canvas 碰撞檢測canvas.getContext('2d').addHitRegion != 'undefined'
canvas輸出圖片支持 canvas.toDataURL('image/jpeg').substring(5,15) == 'image/jpeg'

更多請見 html5test的engine.js函數中testCanvas函數
video audio webRTC參見testVideo testAudio testWebRTC

多媒體輸入支持

瀏覽器是否支持攝像頭麥克風等設備

return navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

更多見testInput

元素

data-xxx屬性

var element = document.createElement('div');
            element.setAttribute('data-test', 'test');
            return 'dataset' in element

element.dataset爲 {test: "test"} 是一個 DOMStringMap 對象

是否支持新元素

element instanceof HTMLElement && !(element instanceof HTMLUnknownElement) && this.isBlock(element) && this.closesImplicitly(eletag)

isBlock是判斷元素的display是不是block
元素樣式判斷
根據document.defaultView.getComputedStyle(element)返回的對象
如一個div元素通過此函數返回的對象s s.display == 'block' 應爲true

this.closesImplicitly是這麼一個函數

function (name) {
            var foo = document.createElement('div');
            foo.innerHTML = '<p><' + name + '></' + name + '>';
            return foo.childNodes.length == 2;
        }

新Form標籤

var element = this.createInput('email');
                                                    
            var validation = false;
            if ('validity' in element.field) {
                validation = true;
                
                element.field.value = "foo";
                validation &= !element.field.validity.valid

                element.field.value = "foo@bar.org";
                validation &= element.field.validity.valid
            }

submit類型的input標籤( 也就是建立input的時候不指定任何type )的
formAction formEnctype formMethod formNoValidate formTarget 屬性檢測
(HTML5容許一個表單有兩個提交按鈕該以上屬將會覆蓋form中的屬性)

element = document.createElement('input');
return 'formAction' in element;

更多在engine中的testForm函數中

與元素的交互

Drag And Drop

var element = document.createElement('div');
return 'draggable' in element;

更多在testInteraction 中

ContentEditable return 'contentEditable' in element
對應事件 return 'execCommand' in document
更多在 /* Content editable */ L2780

History

return window.histroy && histroy.pushState

html5協議支持

你如今能夠使用 navigator.registerProtocolHandler() 方法把 web 應用程序註冊成一個協議處理程序。
return indow.navigator.registerProtocolHandler
更多在 testOffline 中

安全

window.crypto支持
全局相關的加密對象該對象容許網頁訪問某些加密相關的服務。

var crypto = window.crypto || window.webkitCrypto || window.mozCrypto || window.msCrypto || window.oCrypto;
return crypto && 'subtle' in crypto ;

CSP支持(內容安全策略 Content Security Policy)
內容安全策略（Content Security Policy，簡稱CSP）是一種以可信白名單做機制，來限制網站中是否能夠包含某來源內容。

默認配置下不容許執行內聯代碼 <script> 塊內容，內聯事件，內聯樣式
禁止執行eval() , newFunction() , setTimeout([string], …) 和setInterval([string], …)

return (!(function() { try { return eval('true'); } catch (e) {} return false; })()) && 'SecurityPolicyViolationEvent' in window

iframe的sandbox支持

Sandbox
在html5頁面中，能夠使用iframe的sandbox屬性，好比：<iframe src="http://alibaba.com" sandbox>
sandbox後面若是不加任何值，就表明採用默認的安全策略，即：iframe的頁面將會被當作一個獨自的源，同時不能提交表單，以及執行javascript腳本，也不能讓包含iframe的父頁面導航到其餘地方

return 'sandbox' in document.createElement('iframe')

更多參考 testSecurity

Geographic定位支持

return !!navigator.geolocation

更多在testGeolocation

WebGL

canvas的context除了常見的 '2d' 還有 web-gl 這個就是繪製3d圖形的

var contexts = ['webgl', 'ms-webgl', 'experimental-webgl', 'moz-webgl']
//...
if ( element.getContext(contexts[i]  ){
    pass = true;
}

HTML5 通訊

Beacon支持

The navigator.sendBeacon() method can be used to asynchronously transfer small HTTP data from the User Agent to a web server.

Beacon用在哪裏
如某些統計系統，在頁面unload時，若是要上報當前數據，採用xhr的同步上報方式，會阻塞當前頁面的跳轉；使用new Image有可能遇到aborted，致使沒法成功發送。
如今好了，能夠使用瀏覽器來提供發送保障的更簡潔的sendBeacon方法。sendBeacon是異步的，不會影響當前頁到下一個頁面的跳轉速度，且不受同域限制。

'sendBeacon' in navigator

EventSource支持
這個是用於初始化一個SSE對象的
一個最簡單的SSE例子

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br />";
  };

判斷 'EventSource' in window

Promise支持

'Promise' in window && typeof window.fetch === 'function' && window.fetch('') instanceof Promise

好好的Promise判斷爲何這裏還要判斷fetch呢
fetch是啥它是用來取代ajax的更多點這裏
使用fetch會返回Promise對象因此加上fetch的判斷纔是更加完整的Promise支持

更完整一點的Promise

if ('Promise' in window &&
                'resolve' in window.Promise &&
                'reject' in window.Promise &&
                'all' in window.Promise &&
                'race' in window.Promise &&
                (function() {
                  var resolve;
                  new window.Promise(function(r) { resolve = r; });
                  return typeof resolve === 'function';
                }()))
            {
                passed = YES;
            }

WebSocket支持

return 'WebSocket' in window || 'MozWebSocket' in window

WebSocket對二進制的支持

new WebSocket('wss://.').binaryType)
//OR
new WebSocket('ws://.').binaryType)

Streams 流 (視頻流)
'ReadableStream' in window
'WriteableStream' in window

文件支持

'FileReader' in window
dataURL支持

'FileReader' in window && 'readAsDataURL' in (new FileReader())

更多見testFiles()

存儲

sessionStorage localStorage

'sessionStorage' in window && window.sessionStorage != null
'localStorage' in window && window.localStorage != null

indexedDB的判斷大約在 L3485
可是我沒看明白 if (indexedDB && ! 'deleteDatabase' in indexedDB) passed != BUGGY; 有啥意義

更多在testStorage()

其它

全屏支持

return document.documentElement.requestFullscreen  document.documentElement.webkitRequestFullScreen ||  document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;

通知

return 'Notification' in window || 'webkitNotifications' in window || 'mozNotification' in window.navigator || 'oNotification' in window || 'msNotification' in window

JSON支持應該都支持JSON吧
'JSON' in window && 'parse' in JSON

base64支持
咱們知道使用base64加密字符串是使用btoa()函數解碼則是 atob()
'btoa' in window && 'atob' in window

mutationObserver
它能夠監測DOM的變化, 用於取代DOM3 中的 Mutation Events
入門例子

return 'MutationObserver' in window || 'WebKitMutationObserver' in window || 'MozMutationObserver' in window || 'oMutationObserver' in window || 'msMutationObserver' in window

onerror 支持是一種相似於try catch的東東 chrome不支持

相關標籤/搜索

html5test

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。