從零開始學 Web 之 HTML5（三）網路監聽，全屏，檔案讀取，地理定位介面，應用程式快取

阿新 • • 發佈：2019-01-15

一、網路監聽介面

ononline：網路連通時觸發
onoffline：網路斷開時觸發

window.addEventListener("online", function(){});
window.addEventListener("offline", function(){});

二、全屏介面

全屏操作的主要方法和屬性：

1、requestFullScreen(); 開啟全屏顯示

但是不同的瀏覽器需要新增的字首不同：

chrome：webkit ， firefox：moz ，IE：ms

於是就變成了 webkitRequestFullScreen()， mozRequestFullScreen()

， msRequestFullScreen()。由於使用的方法不同，所以要做相容性處理。

2、cancelFullScreen(); 退出全屏顯示

退出全屏的操作也要加字首，並且呼叫其的元素只能是 ducument，而不能是其他元素。

3、fullscreenElement；是否是全屏狀態

判斷是否為全屏狀態也要加字首，並且呼叫其的元素只能是 ducument，而不能是其他元素。（注意只有 firefox是駝峰寫法，最符合 html5 標準）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img src="images/l1.jpg"><br>
    <input type="button" value="進入全屏" id="btn1">
    <input type="button" value="退出全屏" id="btn2">
    <input type="button" value="是否全屏" id="btn3">
</div>

<script>
    // 開啟全屏顯示
    document.querySelector("#btn1").addEventListener("click", function () {
        var divObj = document.querySelector("div");
        if (divObj.requestFullscreen) {
            divObj.requestFullscreen();
        }
        else if (divObj.webkitRequestFullScreen) {
            divObj.webkitRequestFullScreen();
        }
        else if (divObj.mozRequestFullScreen) {
            divObj.mozRequestFullScreen();
        }
        else if (divObj.msRequestFullScreen) {
            divObj.msRequestFullScreen();
        }
    }, false);

    // 退出全屏顯示
    document.querySelector("#btn2").addEventListener("click", function () {
        if (document.cancelFullscreen) {
            document.cancelFullscreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.msCancelFullScreen) {
            document.msCancelFullScreen();
        }
    }, false);

    // 是否是全屏狀態
    document.querySelector("#btn3").addEventListener("click", function () {
        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
            console.log("yes");
        }
        else {
            console.log("no");
        }
    }, false);
</script>
</body>
</html>

三、應用程式快取

主要應用在：當離線模式下，頁面需要選擇性快取一些內容的時候。

<!DOCTYPE html>
<!--manifest="應用程式快取清單檔案的路徑  建議檔案的副檔名是appcache,這個檔案的本質就是一個文字檔案"-->
<html lang="en" manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 300px;
            display: block;
        }
    </style>
</head>
<body>
<img src="../images/l1.jpg" alt="">
<img src="../images/l2.jpg" alt="">
<img src="../images/l3.jpg" alt="">
<img src="../images/l4.jpg" alt="">
</body>
</html>

demo.appcache 檔案

CACHE MANIFEST
#上面一句程式碼必須是當前文件的第一句
#後面寫註釋

#需要快取的檔案清單列表
CACHE:
#下面就是需要快取的清單列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有檔案

#配置每一次都需要重新從伺服器獲取的檔案清單列表
NETWORK:
../images/l3.jpg

#配置如果檔案無法獲取則使用指定的檔案進行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有檔案

四、檔案讀取介面

FileReader：主要是讀取檔案內容。

使用 new FileReader 生成的物件有下列幾個方法，用於讀取檔案：

readAsText()：讀取文字檔案，返回文字字串，預設編碼是UTF-8
readAsBinaryString()：讀取任意型別的檔案，返回二進位制字串。這個方法不是用來讀取檔案展示給使用者看，而是儲存檔案。例如：讀取檔案的內容，獲取二進位制資料，傳遞給後臺，後臺接收了資料之後，再將資料儲存。
readAsDataURL()：讀取檔案獲取一段以data開頭的字串，這段字串的本質就是DataURL。

DataURL是一種將檔案(這個檔案一般就是指影象或者能夠嵌入到文件的檔案格式)嵌入到文件的一種格式。DataURL是將資源轉換為base64編碼的字串形式，並且將這些內容直接儲存在url中，這樣做可以優化網站的載入速度和執行效率。
abort()：中斷檔案讀取。

比如現在有一需求，選擇圖片並實時顯示（類似在網頁上更換頭像，可以實時預覽圖片）：

<body>
<!--需求：即時預覽：
即時：當用戶選擇完圖片之後就立刻進行預覽的處理 >>onchange
預覽：通過檔案讀取物件的readAsDataURL()完成-->
<form action="">
    檔案： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
    <div></div>
    <input type="submit">
</form>
<img src="" alt="">
<script>
    var div=document.querySelector("div");
    function getFileContent(){
       /*1.建立檔案讀取物件*/
        var reader=new FileReader();
        /*2.讀取檔案，獲取DataURL
        * 2.1.說明沒有任何的返回值:void：但是讀取完檔案之後，它會將讀取的結果儲存在檔案讀取物件的result中
        * 2.2.需要傳遞一個引數（binary large object）:檔案(圖片或者其它可以嵌入到文件的型別)
        * 2.3:檔案儲存在file表單元素的files屬性中，它是一個數組，當有 multiple 屬性的時候這個陣列的值會有多個。*/
        var file=document.querySelector("#myFile").files[0];
        reader.readAsDataURL(file);
        /*獲取資料*/
        /*FileReader提供一個完整的事件模型，用來捕獲讀取檔案時的狀態
        * onabort:讀取檔案中斷片時觸發
        * onerror:讀取錯誤時觸發
        * onload:檔案讀取完成且成功時觸發
        * onloadend:檔案讀取完成時觸發，無論成功還是失敗
        * onloadstart:開始讀取時觸發
        * onprogress:讀取檔案過程中持續觸發*/
        reader.onload=function(){
            //console.log(reader.result);
            /*展示*/
            document.querySelector("img").src=reader.result;
        }
        // 模擬進度條顯示
        reader.onprogress=function(e){
            var percent= (e.loaded/ e.total)*100+"%";
            div.style.width=percent;
        }
    }
</script>
</body>

onchange：就是當檔案內容發生變化時觸發的事件。

五、地理定位介面

方法：

// 引數1：獲取地理資訊成功之後的回撥函式
// 引數2：獲取地理資訊失敗之後的回撥函式
// 引數3：調整獲取當前地理資訊的方式
//       enableHighAccuracy:true/false:是否使用高精度
//       timeout:設定超時時間，單位ms
//       maximumAge:可以設定瀏覽器重新獲取地理資訊的時間間隔，單位是ms
navigator.geolocation.getCurrentPosition(success,error,option);

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .de {
            width: 300px;
            height: 300px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="demo" class="de"></div>
<script>
    var x = document.getElementById("demo");

    function getLocation() {
        /*能力測試*/
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError, {
                /*enableHighAccuracy:true,
                timeout:3000*/
            });
        }
        else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    /*成功獲取定位之後的回撥*/
    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude +
            "<br />Longitude: " + position.coords.longitude;
    }

    /*獲取定位失敗之後的回撥*/
    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }

    getLocation();
</script>

</body>
</html>

獲取地理位置成功，將會把獲取到的地理資訊以引數的形式傳遞給回撥函式：

position.coords.latitude 緯度
position.coords.longitude 經度
position.coords.accuracy 精度
position.coords.altitude 海拔高度

注意：由於地理位置屬於使用者的隱私資訊，一般瀏覽器不允許獲取，只有在瀏覽器中開啟之後才能夠獲取。然而，在中國使用PC端的瀏覽器是不允許獲取到使用者的資訊的，手機端可以。

那麼怎麼在PC端的瀏覽器獲取到使用者的位置資訊呢？

呼叫百度地圖，高德地圖等第三方提供的API介面獲取使用者資訊。

從零開始學 Web 之 HTML5（三）網路監聽，全屏，檔案讀取，地理定位介面，應用程式快取

一、網路監聽介面 ononline：網路連通時觸發 onoffline：網路斷開時觸發 window.addEventListener("online", function(){}); window.addEventListener("offline", function(){}); 二、全屏介面全

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤

一、HTML5簡介 1、什麼是html5 html5 不是一門新的語言，而是我們之前學習的 html 的第五次重大修改版本。 2、html的發展歷史超文字標記語言（第一版，不叫 HTML 1.0）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）； HTML 2.0——19

從零開始學 Web 之 HTML5（四）拖拽介面，Web儲存，自定義播放器

>大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述由於 val asc logs 更新大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 ES6（三）ES6基礎語法一

arr 方法 foreach reac 公眾存在 lock 數組名回調函數大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博

從零開始學 Web 之 jQuery（三）元素操作，鏈式程式設計，動畫方法

一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函式

一、直接使用 document 獲取的元素 // 獲取 body document.body; // 獲取 title document.title; // 獲取的是 title 中的值 // 獲取 html document.documentElement; 1、案例：圖片跟著滑鼠移動 <!DOC

從零開始學 Web 之 CSS（三）連結偽類、背景、行高、盒子模型、浮動

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、連結偽類 a:

從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、相容程式碼 1

從零開始學 Web 之 CSS3（三）漸變，background屬性

一、漸變漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變、徑向漸變。 1、線性漸變線性漸變：指沿著某條直線朝一個方向產生漸變效果。語法： background: linear-gradient(

從零開始學 Web 之 HTML（三）表單

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、表格 1

從零開始學 Web 之 JavaScript（三）函式

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、函式 1、函式

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用添加方式執行存在區別也會地址大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：http://ww

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

遊記 document 空閑 name center 20px 實現 resp 也會大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 HTML5（三）網路監聽，全屏，檔案讀取，地理定位介面，應用程式快取

一、網路監聽介面

二、全屏介面

三、應用程式快取

四、檔案讀取介面

五、地理定位介面

相關推薦