分享幾個瀏覽器的API接口

在日常開發中總是和各種 API 打交道，我們名為前端工程師實為 API 調用工程師。這篇文章我就分享 7 個有趣的 API，你若通過閱讀這篇文章對前端增加一點點的樂趣，對我來說也是一種鼓勵。這些API在不同的瀏覽器中兼容性也不一樣，使用前請仔細審查。

API使用示例

我們先看下其中幾個API的實戰效果圖：

 

1. 監聽屏幕旋轉變化接口: orientationchange

定義：

這個 API 可以將你手機是否橫屏的情況暴露給需要知道的人知道。

使用：

screenOrientation: function(){
 let self = this;
 let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
 window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
 self.angle = orientation.angle;
 });
}

 

 

如果只是樣式的改變也可以通過媒體查詢來監聽：

/* 豎屏 */
@media screen and (orientation: portrait) {
 // some css code
}
/* 橫屏 */
@media screen and (orientation: landscape) {
 // some css code
}

 

2. 電池狀態：navigator.getBattery()

定義：

這個 API 可以將你手機電池狀態的情況暴露給需要知道的人知道。

這個 api 返回的是一個 promise 對象，會給出一個 BatteryManager 對象，對象中包含了以下信息：

 

使用：

getBatteryInfo: function(){
 let self = this;
 if(navigator.getBattery){
 navigator.getBattery().then(function(battery) {
 // 判斷是否在充電
 self.batteryInfo = battery.charging ? `在充電 : 剩余 ${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`;
 // 電池充電狀態改變事件
 battery.addEventListener('chargingchange', function(){
 self.batteryInfo = battery.charging ? `在充電 : 剩余 ${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`;
 });
 });
 }else{
 self.batteryInfo = '不支持電池狀態接口';
 }
}

 

3. 讓你的手機震動: window.navigator.vibrate(200)

定義：

這個 API 可以讓你的手機按你的想法震動。

使用：

震動效果會在很多游戲使用。比如歡樂斗地主中，地主打完王炸后手機都會有震動的效果，以此來表達地主嘚瑟的心情也很是合理。

示例代碼如下：

vibrateFun: function(){
 let self = this;
 if( navigator.vibrate ){
 navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
 }else{
 self.vibrateInfo = "您的設備不支持震動";
 }
 <!--
 // 清除震動 
 navigator.vibrate(0);
 // 持續震動
 setInterval(function() {
 navigator.vibrate(200);
 }, 500);
 -->
}

 

4. 當前語言：navigator.language

定義：

這個 API 可以告訴你當前應該使用什么語言。

如果你需要和我一樣做多語言適配，這個 API 或許可以給你提供一個不錯的思路。

使用：

 

不同瀏覽器返回的值稍微有點差異。你可以通過以下封裝好的方法來消除這種差異：function getThisLang(){

 const langList = ['cn','hk','tw','en','fr'];
 const langListLen = langList.length;
 const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
 for( let i = 0; i < langListLen; i++ ){
 let lang = langList[i];
 if(thisLang.includes(lang)){
 return lang
 }else {
 return 'en'
 }
 }
}

 

不同的語言就對應不同的語言文案就好。

5. 聯網狀態：navigator.onLine

定義：

這個 API 可以告訴讓你知道你的設備的網絡狀態是否連接着。

使用：

比如我上午在看一篇文章，可是沒看完就到了吃飯的點，這么熱愛學習的我肯定是選擇吃完午飯回來繼續看。

30 分鍾過后……

吃晚飯回到公司，打開電腦繼續把那篇文章看完，看完了打算點了贊，發現給了這個提示：

 

這個提示讓我有點懵（就是沒網絡了）。

這個時候我們就可以使用這個 API，這樣就可以准確的告訴用戶“您的網絡無法連接，請檢查”。這樣用戶是不是可以有更好的體驗呢？

代碼如下：

mounted(){
 let self = this;
 window.addEventListener('online', self.updateOnlineStatus, true);
 window.addEventListener('offline', self.updateOnlineStatus, true);
},
methods: {
 updateOnlineStatus: function(){
 var self = this;
 self.onLineInfo = navigator.onLine ? "online" : "offline";
 },
}

 

注意：navigator.onLine 只會在機器未連接到局域網或路由器時返回 false，其他情況下均返回 true。 也就是說，機器連接上路由器后，即使這個路由器沒聯通網絡，navigator.onLine 仍然返回 true。

6. 瀏覽器活躍窗口監聽: window.onblur & window.onfocus

定義：

這兩個 api 分別表示窗口失去焦點和窗口處於活躍狀態。

瀏覽其他窗口、瀏覽器最小化、點擊其他程序等， window.onblur 事件就會觸發;

回到該窗口， window.onfocus 事件就會觸發。

使用：

 

上面的截圖是微信網頁版的消息提示。代碼很簡單：

mounted(){
 let self = this;
 window.addEventListener('blur', self.doFlashTitle, true);
 window.addEventListener('focus', function () {
 clearInterval(self.timer);
 document.title = '微信網頁版';
 }, true);
},
methods: {
 doFlashTitle: function(){
 var self = this;
 self.timer = setInterval( () => {
 if (!self.flashFlag) {
 document.title = "微信網頁版";
 } else {
 document.title = `微信（${self.infoNum}）`;
 }
 self.flashFlag = ! self.flashFlag
 }, 500)
 },
}

 

7. 全屏 API（Fullscreen API）

定義：

這個 API 可以使你所打開的頁面全屏展示，沒有其他頁面外的內容展示在屏幕上。

使用：

Element.requestFullscreen() 方法用於發出異步請求使元素進入全屏模式。

調用此 API 並不能保證元素一定能夠進入全屏模式。如果元素被允許進入全屏幕模式，document 對象會收到一個 fullscreenchange 事件，通知調用者當前元素已經進入全屏模式。如果全屏請求不被許可，則會收到一個 fullscreenerror 事件。

當進入/退出全屏模式時,會觸發 fullscreenchange 事件。你可以在監聽這個事件，做你想做的事。

fullScreenFun: function(){
 let self = this;
 var fullscreenEnabled = document.fullscreenEnabled ||
 document.mozFullScreenEnabled ||
 document.webkitFullscreenEnabled ||
 document.msFullscreenEnabled;
 if (fullscreenEnabled) {
 let de = document.documentElement;
 if(self.fullScreenInfo === '打開全屏'){
 if( de.requestFullscreen ){
 de.requestFullscreen();
 }else if( de.mozRequestFullScreen ){
 de.mozRequestFullScreen();
 }else if( de.webkitRequestFullScreen ){
 de.webkitRequestFullScreen();
 }
 self.fullScreenInfo = '退出全屏'
 } else {
 if( document.exitFullscreen ){
 document.exitFullscreen();
 }else if( document.mozCancelFullScreen ){
 document.mozCancelFullScreen();
 }else if( document.webkitCancelFullScreen ){
 document.webkitCancelFullScreen();
 }
 self.fullScreenInfo = '打開全屏'
 }
 } else {
 self.fullScreenInfo = '瀏覽器當前不能全屏';
 }
}

 

相關：

1. document.fullscreenElement: 當前處於全屏狀態的元素 element
2. document.fullscreenEnabled: 標記 fullscreen 當前是否可用
3. document.exitFullscreen(): 退出全屏

小結

這篇文章很簡單。我的目的是想介紹一下有趣的 API，來提高大家對前端的一點興趣。

我認為這些 API 比較有趣，若你一直疲於業務，那么這些 API 或許可以給你不一樣的感受。

轉自https://www.toutiao.com/i6682529032929542669/?timestamp=1593355937&app=news_article&group_id=6682529032929542669&use_new_style=1&req_id=202006282252170100140481341349BECD

喜歡這篇文章？歡迎打賞~~