我擦, 可能我以前用的是假H5

www.zhangxinxu.com/study/20170…

demo

var eleImage = document.getElementById('image')
eleImage.requestPointerLock()
document.exitPointerLock()
複製代碼

deviceorientation 設備物理方向與 devicemotion 設備加速信息

官方文檔: www.w3.org/html/ig/zh/…

參考文檔: imweb.io/topic/56ab2…

應用場景

搖一搖
體感遊戲
羅盤

兼容性

demo

if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', shakeEventHandler, false);
} else {
    alert('本設備不支持devicemotion事件');
}

var THRESHOLD = 1000;
var preX = preY = preZ = x = y = z = 0;
var preTime = 0;

function shakeEventHandler(event) {
    var acceleration = event.accelerationIncludingGravity; 
    var curTime = new Date().getTime();
    var diffTime = curTime-preTime;

    if (diffTime > 100) { 
        preTime = curTime;  
        x = acceleration.x;  
        y = acceleration.y;  
        z = acceleration.z;  

        var accelerationDiff = Math.abs(x + y + z - preX - preY - preZ) / diffTime * 10000;  

        if (accelerationDiff > THRESHOLD) {  
            alert("搖一搖有驚喜！");  
        }  
        preX = x;  
        preY = y;  
        preZ = z;  
    }  
}
複製代碼

Ambient Light 環境光

官方文檔: www.w3.org/TR/ambient-…

官方文檔: developer.mozilla.org/en-US/docs/…

應用場景

閱讀時的自適應背景光

兼容性

demo

var sensor = new AmbientLightSensor();
sensor.addEventListener("reading", function (event) {
  console.log(sensor.illuminance)
})
複製代碼

userAgent 用戶代理

官方文檔： www.html5plus.org/doc/zh_cn/d…

應用場景

簡單判斷設備類型

demo

//判斷當前頁面所在的環境是否是微信內置瀏覽器
function isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
    } else {
    return false;
    }
}
//判斷蘋果、安卓、pc
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
   //判斷iPhone|iPad|iPod|iOS  
  window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) { 
  //判斷Android  
  window.location.href ="Android.html";
} else { 
  //pc  
  window.location.href ="pc.html";
};

複製代碼

platform 硬件平臺

官方文檔 developer.mozilla.org/zh-CN/docs/… 返回一個字符串,表示瀏覽器所在的系統平臺類型. 參考文檔 developer.mozilla.org/zh-CN/docs/…

demo

document.write("硬件平臺: " + navigator.platform);
複製代碼

geolocation 地理位置

應用場景

須要獲取當前設備所在的位置，經緯度收貨地址常常用到

demo

function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>您的瀏覽器不支持地理位置</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "沒法獲取您的位置";
  };

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}
複製代碼

窗口相關

官方文檔: www.w3.org/Style/CSS/

Fullscreen 全屏

官方文檔: www.w3.org/TR/fullscre… 參考文檔: www.sitepoint.com/use-html5-f…

應用場景

全屏展現某元素

兼容性

blogs.sitepointstatic.com/examples/te…

demo

// 讓某元素全屏
document.getElementById("myImage").requestFullscreen();
document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);
// 退出全屏
document.exitFullscreen()
複製代碼

/* 全屏樣式 */
:-webkit-full-screen {
}

:-moz-full-screen {
}

:-ms-fullscreen {
}

:fullscreen {
}
複製代碼

print 打印

應用場景

打印當前窗口的內容

demo

<html>
    <head>
    <script type="text/javascript">
    function printpage()
      {
      window.print()
      }
    </script>
    </head>
    <body>

    <input type="button" value="Print this page"
    onclick="printpage()" />

    </body>
  </html>
複製代碼

open close 打開新窗口關閉窗口

應用場景

open 是用指定的名稱將指定的資源加載到瀏覽器上下文（窗口 window ，內嵌框架 iframe 或者標籤 tab ）。若是沒有指定名稱，則一個新的窗口會被打開而且指定的資源會被加載進這個窗口的瀏覽器上下文中。
close 該方法只能由 window.open 方法打開的窗口的window對象來調用.若是一個窗口不是由腳本打開的,調用該方法時,JavaScript控制檯會出現下面的錯誤: "不能使用腳本關閉一個不是由腳本打開的窗口".

##demo

let windowObjectReference;
    let strWindowFeatures = `
        menubar=yes,
        location=yes,
        resizable=yes,
        scrollbars=yes,
        status=yes
    `;

    function openRequestedPopup() {
        windowObjectReference = 
        window.open(
            "http://www.cnn.com/", 
            "CNN_WindowName", 
            strWindowFeatures
        );
    }
    // 關閉一個由 window.open()方法打開的窗口
    <script type="text/javascript">
    // 全局變量,存儲將要打開的窗口的對象引用.
    var openedWindow;

    function openWindow()
    {
      openedWindow = window.open('moreinfo.htm');
    }
    function closeOpenedWindow()
    {
      openedWindow.close();
    }
    </script>
    // 關閉當前窗口
    <script type="text/javascript">
      function closeCurrentWindow()
      {
        window.close();
      }
    </script>
複製代碼

moveTo moveBy 移動窗口

應用場景

將當前的窗口移動到某一個位置

兼容性

從Firefox 7開始,若是符合下列狀況,則普通網頁中的JavaScript沒法經過調用該函數來移動瀏覽器窗口

當前窗口或標籤頁不是由window.open方法建立的
當前標籤頁所在的窗口包含有多個標籤頁區別
window moveTo 按照指定的絕對位置移動當前窗口，
window.moveBy函數按照與當前位置相對的距離移動當前窗口。

demo

function origin() {
    // 把窗口移動到坐上角
    window.moveTo(0, 0);
  }

  function budge() {
    moveBy(10, -10);
  }
複製代碼

resize 調整窗口

應用場景

resizeBy 相對於窗口當前大小來調整該窗口的大小
resizeTo 以絕對大小方式調整窗口的大小

兼容性

從 Firefox 7 開始，不能改變瀏覽器窗口的大小了，要依據下面的規則：

不能設置那些不是經過 window.open 建立的窗口或 Tab 的大小。
當一個窗口裏面含有一個以上的 Tab 時，沒法設置窗口的大小。

demo

// 縮小窗口
    window.resizeBy(-200, -200);
    // 將窗口設置爲整個屏幕的 1/4 大小（面積）
    function quarter() {
      window.resizeTo(
        window.screen.availWidth / 2,
        window.screen.availHeight / 2
      );
    }
複製代碼

scroll 滾動窗口

應用場景

當文檔超過指定區域長度，須要滾動
window.scrollBy 相對滾動滾動指定的距離，相對於上次移動的最後位置移動
window.scroll 滾動至文檔中的絕對位置滾動指定的距離
scrollTo()是一步到位，而scrollBy()是逐步累加。

兼容性

demo

//把縱軸上第100個像素置於窗口頂部
    <button onClick="scroll(0, 100);">點擊以向下滾動100像素</button>
    window.scrollTo( 0, 1000 );
    // behavior  類型String,表示滾動行爲,支持參數 smooth(平滑滾動),instant(瞬間滾動),默認值auto,實測效果等同於instant
    // 設置滾動行爲改成平滑的滾動
    window.scrollTo({ 
        top: 1000, 
        behavior: "smooth" 
    });
    // 向下滾動一頁：
    window.scrollBy(0, window.innerHeight);
    // 使用 options：
    window.scrollBy({   
      top: 100,
      left: 100,   
      behavior: "smooth" 
    });

複製代碼

stop 阻止頁面資源加載

應用場景

至關於點擊了瀏覽器的中止按鈕. 因爲已經加載的腳本的順序, stop() 方法不能阻止已經包含在加載中的文檔，可是它可以阻止較大的圖片，新窗口，和一些延遲加載的對象的加載.

兼容性

www.w3cschool.cn/fetch_api/f… stop()方法不建議在Internet Explorer中使用.

demo

window.stop()
複製代碼

屏幕相關

Screen 屏幕屬性

應用場景

獲取屏幕當前的一些屬性

demo

// 瀏覽器窗口在屏幕上的可佔用空間上邊距離屏幕上邊界的像素值。
  var iAvail = window.screen.availTop
  // 返回瀏覽器可用空間左邊距離屏幕（系統桌面）左邊界的距離。
  var iAvail = window.screen.availLeft
  // 返回瀏覽器返回目標設備或緩衝器上的調色板的比特深度。
  document.write("顏色深度: " + screen.colorDepth);
  // 返回屏幕的位深度/色彩深度（bit depth）。根據CSSOM( CSS對象模型 )視圖，爲兼容起見，該值總爲24。
  var iAvail = window.screen.pixelDepth
  // 返回當前屏幕的轉向。
  var iAvail = window.Screen.orientation
複製代碼

devicePixelRatio 設備像素比

可以返回當前顯示設備的物理像素分辨率與 CSS 像素分辨率的比率。此值也能夠解釋爲像素大小的比率：一個 CSS 像素的大小與一個物理像素的大小的比值。簡單地說，這告訴瀏覽器應該使用多少個屏幕的實際像素來繪製單個 CSS 像素。

應用場景

處理標準顯示與 HiDPI 或 Retina 顯示之間的差別時頗有用

兼容性

demo

var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  var canvasSize = 200;

  //overriding default window.devicePixelRatio, changing it to 2 on retina display will make canvas clear
  window.devicePixelRatio = 1;

  canvas.width = canvas.height = canvasSize;

  ctx.fillStyle = "#bada55";
  ctx.fillRect(10, 10, 300, 300);
  ctx.fillStyle = "#ffffff";
  ctx.font = '18px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  var x = canvasSize / 2;
  var y = canvasSize / 2;

  var textString = "I love MDN";
  ctx.fillText(textString, x, y);
複製代碼

lockOrientation 鎖定屏幕方向

官方文檔 www.w3.org/TR/screen-o…

應用場景

把屏幕鎖定爲指定的方向.網站鎖定到一個特定的方向，橫屏或豎屏，此時，原生應用的格式是能夠被指定的。APP只在預設格式下顯示—獨立於實際的設備方向。經過使用HTML5的 Screen Orientation API, 能夠在JavaScript定義屏幕方向。此方法僅適用於已安裝的Web apps 或全屏模式的Web 頁面.

兼容性

IE 11+和Firefox 33+也支持Screen Orientation API，但須要對應的私有前綴

screen.msLockOrientation.lock("portrait-primary"); screen.mozLockOrientation.lock("portrait-primary");

在IE 11+和Firefox 33+中，檢測方向變化的事件名也不一樣，你應該使用帶對應前綴的orientationchange，而不是change. 當使用Screen Orientation API時，還須要記住一件事：因爲要Fullscreen API一塊兒使用才能起做用，因此不該該使用它來設計網站之類的。對於須要全屏模式的瀏覽器遊戲或其餘應用程序，它能有更好的效果。

demo

// 讀取當前設備的方向
alert(screen.orientation.type);
alert(screen.orientation.angle);
// 鎖定屏幕爲豎屏模式，不能設備如何旋轉，屏幕都不會切換到橫屏模式。
window.screen.lockOrientation([「portrait-primary」,「portrait-secondary」]);
// 鎖定屏幕爲橫屏模式，無能設備如何旋轉，屏幕都不會切換到豎屏模式。
window.screen.lockOrientation([「landscape-primary」,「landscape-secondary」]);
// 取消屏幕的鎖屏，屏幕回到原始狀態，
window.screen.unlockOrientation();

複製代碼

須要注意的點

1.若是你在瀏覽器中打開了一個新文檔，例如，當點擊一個連接時，定義的方向將隨着全屏模式同時結束。Screen Orientation API僅對當前文檔有效。 2.角度爲0等同於天然方向，大部分智能手機的天然方向是portrait-primary；90°等同於landscape-primary；180°等同portrait-secondary；270°等同landscape-secondary。不一樣的設備，angle表明不一樣的關鍵字。

Web Performance 性能相關

官方文檔: www.w3.org/webperf/ git倉庫地址: github.com/w3c/web-per…

Page Visibility Level 2 頁面可見性

官方文檔: www.w3.org/TR/page-vis…

參考文檔: www.sitepoint.com/introductio…

應用場景

頁面切到後臺時的一些處理, 如暫停音視頻, 暫停刷新畫布, 減慢甚至中止CPU, 帶寬消耗等

兼容性

demo

// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
  // 此處能夠根據 setInterval 和 requestAnimationFrame 切到後臺時的不一樣表現來hack
} else {
  // Handle page visibility change 
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
複製代碼

High Resolution Time Level 2 微秒級精度的時間

官方文檔: www.w3.org/TR/hr-time/ 參考文檔: blogs.msdn.microsoft.com/ie_cn/2012/…

應用場景

同步動畫和音視頻, 用戶計時, 監測頁面性能時有更高的精度
後續調用時間只差不會爲負數或0, 單調遞增, Date.now()沒法保證這一點
起點爲文檔導航啓動的時間, 不受系統時間影響, 更好的作計時任務
嵌套iframe時, 能夠統一參考根文檔導航啓動的時間

兼容性

compatibility: developer.mozilla.org/en-US/docs/… 支持此API的瀏覽器是IE10，Opera 15, Safari iOS 9和Firefox 15+，不帶前綴。Chrome 20+ 需「webkit」前綴，24+不須要前綴。

demo

performance.now()
// 根文檔導航啓動的時間
// top === window // true
top.performance.now()
複製代碼

User Timing Level 2 用戶時序

官方文檔: www.w3.org/TR/user-tim… 參考文檔: www.sitepoint.com/discovering…

應用場景

測試代碼性能, 標記時間戳和測量兩個標記之間通過的時間, 無需聲明變量和產生額外的性能開銷

兼容性

demo

performance.mark("startFoo");
// A time consuming function
foo();
performance.mark("endFoo");

performance.measure("durationFoo", "startFoo", "endFoo");

// Delete all Marks
performance.clearMarks();
// Delete the Measure "durationFoo"
performance.clearMeasure("durationFoo");

複製代碼

Navigation Timing Level 2 導航時序

官方文檔: w3c.github.io/navigation-…

參考文檔: www.sitepoint.com/profiling-p…

應用場景

獲取DNS查找, TCP創建鏈接, 頁面重定向, 構建DOM等消耗的時間

兼容性

compatibility: caniuse.com/#feat=nav-t…

demo

window.addEventListener('load', function() {
  // 確保加載事件結束
  setTimeout(function () {
    var timing = window.performance.timing
    // 用戶經歷的總頁面加載時間
    var userTime = timing.loadEventEnd - timing.navigationStart
    // DNS查找時間
    var dns = timing.domainLookupEnd - timing.domainLookupStart
    // 鏈接到服務器花費的時間
    var connection = timing.connectEnd - timing.connectStart
    // 請求發送到服務器並接受響應花費的時間
    var requestTime = timing.responseEnd - timing.requestStart
    // 文檔獲取(包括訪問緩存)的時間
    var fetchTime = timing.responseEnd - timing.fetchStart
  }, 0)
}, false)

// or in console
// Get the first entry
const [entry] = performance.getEntriesByType('navigation')
// Show it in a nice table in the developer console
console.table(entry.toJSON())
複製代碼

Network 網絡相關

The Network Information 網絡信息

官方文檔: www.w3.org/TR/netinfo-… 參考文檔: www.sitepoint.com/use-network…

應用場景

評估帶寬, 判斷網絡鏈接是否受限
根據網絡信息響應式的加載高分辨率圖片, 沒必要要的字體, 增長Ajax的timeout參數

兼容性

demo

console.table(navigator.connection)
// downlink: 3.4
// effectiveType: "3g"
// onchange: null
// rtt: 350
// saveData: false
複製代碼

online and offline 在線和離線

應用場景

監測用戶在線和離線

兼容性

demo

var condition = navigator.onLine ? "online" : "offline"
window.addEventListener('online',  updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
複製代碼

信號浮標 Beacon

應用場景

頁面卸載完畢前異步發送數據, 不延遲當前頁面的卸載以及下一個頁面的載入

兼容性

demo

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log", analyticsData);
}

複製代碼

Multimedia 多媒體相關

AudioContext 音頻上下文

官方文檔: www.w3.org/TR/webaudio…

應用場景

解決Audio標籤受部分瀏覽器策略沒法自動播放和調整音量的問題
微信瀏覽器裏能夠放在wx.ready callbackFn裏調用
音頻處理, 音頻圖形化
模擬樂器如鋼琴打碟APP, 湯姆貓APP

兼容性

demo

codepen.io/leechikit/e…

// 音頻地址
const SONG1 = 'https://leechikit.github.io/resources/article/AudioContext/song/fingfingxia1.mp3';
// AudioContext對象
let audioContext = null;
// 音頻源
let bufferSource = null;
// 音量模塊
let gainNode = null;
// 是否播放
let isStart = false;
// 播放按鈕元素
let buttonEl = document.querySelector('#button1');
// 音量控件元素
let volumnEl = document.querySelector('#volumn1');

/** * 建立AudioContext上下文 * */
function createAudioContext() {
    try {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
    } catch (e) {
        alert("Web Audio API is not supported in this browser");
    }
}

/** * 解碼音頻文件 * */
function decodeAudioData(url, callback) {
    let request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = () => {
        audioContext.decodeAudioData(request.response, (buffer) => {
            if (!buffer) {
                alert('error decoding file data: ' + url);
                return;
            } else {
                callback(buffer);
            }
        })
    }
    request.onerror = ()=> {
        alert('BufferLoader: XHR error');
    }
    request.send();
}

/** * 建立AudioBufferSourceNode * */
function createBufferSource(config) {
    bufferSource = audioContext.createBufferSource();
    bufferSource.buffer = config.buffer;
    bufferSource.loop = config.loop || false;
    bufferSource.onended = () => {
        bufferSource = null;
    }
}

/** * 建立GainNode對象 * */
function createGainNode() {
    gainNode = audioContext.createGain();
}

/** * 點擊播放按鈕 * */
function buttonClickEvent(buffer) {
    buttonEl.addEventListener('click', (event) => {
        // 中止播放
        if (isStart) {
            event.target.innerText = 'START';
            bufferSource && bufferSource.stop();
            // 開始播放
        } else {
            event.target.innerText = 'STOP';
            createBufferSource({
                buffer,
                loop: true
            });
            createGainNode();
            bufferSource.connect(gainNode);
            gainNode.connect(audioContext.destination);
            bufferSource.start();
        }
        isStart = !isStart;
    });
}

/** * 改變音量事件 * */
function changeVolumnEvent() {
    volumnEl.addEventListener('change', (event) => {
        gainNode && (gainNode.gain.value = event.target.value / 50);
    });
}

/** * 初始化 * */
function init() {
    createAudioContext();
    decodeAudioData(SONG1, (buffer) => {
        buttonEl.setAttribute('data-loaded', true);
        buttonClickEvent(buffer);
        changeVolumnEvent();
    });
}

init();
複製代碼

Media Capture and Streams 媒體捕獲和流

官方文檔: w3c.github.io/mediacaptur… 官方文檔: www.w3.org/2011/04/web… 參考文檔: www.sitepoint.com/introductio…

應用場景

WebRTC, 實時直播
拍照自定義頭像
視頻聊天
抖音
美拍

兼容性

www.audero.it/demo/getuse…

demo

var video = document.querySelector('#video')
var myConstraints = {
  video: {
    facingMode: 'user' // 優先調用前置攝像頭
  }
}
navigator.mediaDevices.getUserMedia(myConstraints).then((stream) => {
  video.src = window.URL.createObjectURL(stream)
  video.play()
}, (error) => {
  console.error(error.name || error)
})

複製代碼

Web Speech web語音

官方文檔: www.w3.org/community/s… 官方文檔: w3c.github.io/speech-api/… 參考文檔: www.sitepoint.com/talking-web…

應用場景

無障礙閱讀
語音控制
遊戲分數, 天氣, 股市, 新聞播報

兼容性

demo

codepen.io/matt-west/p…

// Create the utterance object
// 語音合成
var utterance = new SpeechSynthesisUtterance();
utterance.text = 'My name is Dino';
utterance.lang = 'it-IT';
utterance.rate = 1.2;
utterance.onend = function() {
  window.speechSynthesis.speak(utterance);
});
複製代碼

offlineaudiocontext 音頻處理圖

官方文檔 www.w3.org/TR/webaudio…

與 AudioContext 標準相反的是， OfflineAudioContext 不在硬件設備渲染音頻；相反，它儘量快地生成音頻，輸出一個 AudioBuffer 做爲結果。

demo

// 定義一個在線或者離線的音頻上下文
var audioCtx = new AudioContext();
var offlineCtx = new OfflineAudioContext(2,44100*40,44100);

source = offlineCtx.createBufferSource();

// 使用 XHR 去加載一個音軌，
// 使用 decodeAudioData 去解碼，
// 使用 OfflineAudioContext 去渲染它

function getData() {
  request = new XMLHttpRequest();

  request.open('GET', 'viper.ogg', true);

  request.responseType = 'arraybuffer';

  request.onload = function() {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function(buffer) {
      myBuffer = buffer;
      source.buffer = myBuffer;
      source.connect(offlineCtx.destination);
      source.start();
      //source.loop = true;
      offlineCtx.startRendering().then(function(renderedBuffer) {
        console.log('渲染徹底成功');
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var song = audioCtx.createBufferSource();
        song.buffer = renderedBuffer;

        song.connect(audioCtx.destination);

        play.onclick = function() {
          song.start();
        }
      }).catch(function(err) {
          console.log('渲染失敗: ' + err);
          // 注意: 當 OfflineAudioContext 上 startRendering 被馬上調用，Promise 應該被 reject
      });
    });
  }

  request.send();
}

// 運行 getData 去開始這個進程

getData();

複製代碼

Web Notification 消息提醒

官方文檔: www.w3.org/TR/notifica…

參考文檔: www.zhangxinxu.com/wordpress/2…

應用場景:

消息推送, 聊天

兼容性

www.zhangxinxu.com/study/20160…

demo

enumerateDevices 獲取可用設備

官方文檔：developer.mozilla.org/zh-CN/docs/…

應用場景：

獲取當前媒體詳細信息請求一個可用的媒體輸入和輸出設備的列表，例如麥克風，攝像機，耳機設備等。返回的 Promise 完成時，會帶有一個描述設備的 MediaDeviceInfo 的數組。

兼容性

demo

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("不支持 enumerateDevices() .");
  return;
}
// 列出相機和麥克風.
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});
複製代碼

Semantics 語義相關

MATHML 數學標籤

官方文檔: www.w3.org/Math/ 官方文檔: w3c.github.io/mathml/math…

應用場景

數學公式的展現

兼容性

demo

<mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
      </mrow>
      <mo>&#xB1;<!--plus-minus sign--></mo>
      <msqrt>
        <mrow>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo>-</mo>
          <mrow>
            <mn>4</mn>
            <mo>&#x2062;<!--invisible times--></mo>
            <mi>a</mi>
            <mo>&#x2062;<!--invisible times--></mo>
            <mi>c</mi>
          </mrow>
        </mrow>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>&#x2062;<!--invisible times--></mo>
      <mi>a</mi>
    </mrow>
  </mfrac>
</mrow>
複製代碼

WindowOrWorkerGlobalScope 通訊相關

btoa 編碼

官方文檔 https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa
複製代碼

應用場景

對可能致使通訊問題的數據進行編碼，而後將其傳輸，而後再使用該atob()方法對數據進行解碼。
從String對象建立一個base-64編碼的ASCII字符串，其中字符串中的每一個字符都被視爲二進制數據的字節。

demo

let encodedData = window.btoa("Hello, world"); // base64 編碼
複製代碼

atob 解碼

官方文檔 https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob
複製代碼

應用場景

解碼用btoa編碼一個可能在傳輸過程當中出現問題的數據而且在接受數據以後，使用 atob() 方法再將數據解碼。例如：你能夠編碼、傳輸和解碼操做各類字符，好比0-31的ASCII碼值。

兼容性

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob#Specification
複製代碼

demo

let decodedData = window.atob(encodedData); // 解碼
複製代碼

postMessage Window對象之間的跨源通訊

官方文檔 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
複製代碼

應用場景

在頁面和它產生的彈出窗口之間，或者在頁面和嵌入其中的iframe之間。一般，當且僅當它們源自的頁面共享相同的協議、端口號和主機（也稱爲「同源策略」）時，容許不一樣頁面上的腳本相互訪問。window.postMessage()提供一種受控制的機制來安全地規避這種限制（若是使用得當）。
從廣義上講，一個窗口能夠得到對另外一個窗口的引用（例如，可使用targetWindow=window.opener），而後使用targetWindow.postMessage() 在其上發送一個MessageEvent。而後，接收窗口可根據須要自由處理此事件。傳遞給window.postMessage()的參數（即「message」）經過事件對象暴露給接收窗口。

兼容性

demo

/* * A窗口的域名是<http://example.com:8080>，如下是A窗口的script標籤下的代碼： */

  var popup = window.open(...popup details...);

  // 若是彈出框沒有被阻止且加載完成

  // 這行語句沒有發送信息出去，即便假設當前頁面沒有改變location（由於targetOrigin設置不對）
  popup.postMessage("The user is 'bob' and the password is 'secret'",
                    "https://secure.example.net");

  // 假設當前頁面沒有改變location，這條語句會成功添加message到發送隊列中去（targetOrigin設置對了）
  popup.postMessage("hello there!", "http://example.org");

  function receiveMessage(event) {
    // 咱們能相信信息的發送者嗎? (也許這個發送者和咱們最初打開的不是同一個頁面).
    if (event.origin !== "http://example.org")
      return;

    // event.source 是咱們經過window.open打開的彈出頁面 popup
    // event.data 是 popup發送給當前頁面的消息 "hi there yourself! the secret response is: rheeeeet!"
  }
  window.addEventListener("message", receiveMessage, false);
  /* * 彈出頁 popup 域名是<http://example.org>，如下是script標籤中的代碼: */

  //當A頁面postMessage被調用後，這個function被addEventListenner調用
  function receiveMessage(event) {
    // 咱們能信任信息來源嗎？
    if (event.origin !== "http://example.com:8080")
      return;

    // event.source 就當前彈出頁的來源頁面
    // event.data 是 "hello there!"

    // 假設你已經驗證了所受到信息的origin (任什麼時候候你都應該這樣作), 一個很方便的方式就是把enent.source
    // 做爲回信的對象，而且把event.origin做爲targetOrigin
    event.source.postMessage("hi there yourself! the secret response " +
                            "is: rheeeeet!",
                            event.origin);
  }

  window.addEventListener("message", receiveMessage, false);
複製代碼

Storage 存儲相關

sessionStorage 會話存儲

官方文檔 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
複製代碼

應用場景

很是適合SPA(單頁應用程序) 方便在各業務模塊進行傳值
用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁以後將會刪除這些數

特色

同源策略限制。若想在不一樣頁面之間對同一個sessionStorage進行操做，這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基於同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)
單標籤頁限制。sessionStorage操做限制在單個標籤頁中，在此標籤頁進行同源頁面訪問均可以共享sessionStorage數據。
只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一塊兒發送到服務器，只會在本地生效，並在關閉標籤頁後清除數據。(若使用Chrome的恢復標籤頁功能，seesionStorage的數據也會恢復)。
存儲方式。seesionStorage的存儲方式採用key、value的方式。value的值必須爲字符串類型(傳入非字符串，也會在存儲時轉換爲字符串。true值會轉換爲"true")。
存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下。

兼容性

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
複製代碼

demo

sessionStorage.setItem('myCat', 'Tom');
   // 獲取文本輸入框
   let field = document.getElementById("field");
   
   // 檢測是否存在 autosave 鍵值
   // (這個會在頁面偶然被刷新的狀況下存在)
   if (sessionStorage.getItem("autosave")) {
     // 恢復文本輸入框的內容
     field.value = sessionStorage.getItem("autosave");
   }
   
   // 監聽文本輸入框的 change 事件
   field.addEventListener("change", function() {
     // 保存結果到 sessionStorage 對象中
     sessionStorage.setItem("autosave", field.value);
   });
   // 也能夠存儲json對象
   var userEntity = {
       name: 'tom',
       age: 22
   };
   
   // 存儲值：將對象轉換爲Json字符串
   sessionStorage.setItem('user', JSON.stringify(userEntity));
   
   // 取值時：把獲取到的Json字符串轉換回對象
   var userJsonStr = sessionStorage.getItem('user');
   userEntity = JSON.parse(userJsonStr);
   console.log(userEntity.name); // => tom
複製代碼

localStorage 本地存儲

應用場景

數據比較大的臨時保存方案。如在線編輯文章時的自動保存。
多頁面訪問共同數據。sessionStorage只適用於同一個標籤頁，localStorage相比而言能夠在多個標籤頁中共享數據。

特色

同源策略限制。若想在不一樣頁面之間對同一個localStorage進行操做，這些頁面必須在同一協議、同一主機名和同一端口下。(IE8和9存儲數據僅基於同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)
只在本地存儲。localStorage的數據不會跟隨HTTP請求一塊兒發送到服務器，只會在本地生效。
永久保存。保存的數據沒有過時時間，直到手動去除。
存儲方式。localStorage的存儲方式採用key、value的方式。value的值必須爲字符串類型(傳入非字符串，也會在存儲時轉換爲字符串。true值會轉換爲"true")。
存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下。
同瀏覽器共享。localStorage的數據能夠在同一個瀏覽器的不一樣標籤頁的同源頁面之間共享。

兼容性

Input 輸入相關

Clipboard (Cut & Copy & Paste) 剪貼板

developer.mozilla.org/en-US/docs/…

應用場景

複製粘貼

兼容性

developer.mozilla.org/en-US/docs/…

demo

var logTarget = document.getElementById('logTarget');
function useAsyncApi() {
  return document.querySelector('input[value=async]').checked;
}
function log(event) {
  var timeBadge = new Date().toTimeString().split(' ')[0];
  var newInfo = document.createElement('p');
  newInfo.innerHTML = '<span class="badge">' + timeBadge + '</span> ' + event + '</b>.';
  logTarget.appendChild(newInfo);
}

function performCopyEmail() {
  var selection = window.getSelection();
  var emailLink = document.querySelector('.js-emaillink');

  if (useAsyncApi()) {
    navigator.clipboard.writeText(emailLink.textContent)
      .then(() => log('Async writeText successful, "' + emailLink.textContent + '" written'))
      .catch(err => log('Async writeText failed with error: "' + err + '"'));
  } else {
    selection.removeAllRanges();
    var range = document.createRange();
    range.selectNode(emailLink);
    selection.addRange(range);
  
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      log('Copy email command was ' + msg);
    } catch (err) {
      log('execCommand Error', err);
    }
    
    selection.removeAllRanges();
  }
}

function performCutTextarea() {
  var cutTextarea = document.querySelector('.js-cuttextarea');
  if (useAsyncApi()) {
    navigator.clipboard.writeText(cutTextarea.textContent)
      .then(() => {
        log('Async writeText successful, "' + cutTextarea.textContent + '" written');
        cutTextarea.textContent = '';
      })
      .catch(err => log('Async writeText failed with error: "' + err + '"'));
  } else {
    var hasSelection = document.queryCommandEnabled('cut');
    cutTextarea.select();

    try {
      var successful = document.execCommand('cut');
      var msg = successful ? 'successful' : 'unsuccessful';
      log('Cutting text command was ' + msg);
    } catch (err) {
      log('execCommand Error', err);
    }
  }
}

// Get the buttons
var cutTextareaBtn = document.querySelector('.js-textareacutbtn');
var copyEmailBtn = document.querySelector('.js-emailcopybtn');

// Add click event listeners
copyEmailBtn.addEventListener('click', performCopyEmail);
cutTextareaBtn.addEventListener('click', performCutTextarea);

function logUserOperation(event) {
  log('User performed <b>' + event.type + '</b> operation. Payload is: <b>' + event.clipboardData.getData('text/plain') + '</b>');
}

document.addEventListener('cut', logUserOperation);
document.addEventListener('copy', logUserOperation);
document.addEventListener('paste', logUserOperation);
複製代碼

touch onpointerdown 觸摸手勢

應用場景

拖拽功能
手機觸摸事件

兼容性