国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Fullscreen API 全屏顯示網頁

wangxinarhat / 2148人閱讀

摘要:進入全屏將全屏顯示。內核瀏覽器和表現不同,前者只要求是元素即可,后者則要求必須是文檔流中的元素,比較嚴格,否則不能全屏顯示。內核瀏覽器會阻止除方向鍵控制鍵之外的鍵盤輸入,會在輸入時發出要求用戶退出全屏狀態的提示。

第一次看到應用 Fullscreen API 全屏顯示網頁,是 FaceBook 中的照片放大。作為一個比較新的 API,目前只有 Safari、Chrome 和 FireFox 三種瀏覽器支持該特性。因為尚未發布正式版的標準,所以必須使用瀏覽器特定的方法,也就是應用添加前綴(webit/moz)的方法。
這個 API 不僅能夠使整個頁面全屏顯示,也可以使頁面中的某個元素全屏顯示。它的設計初衷是為了全屏顯示 HTML5 視頻和游戲,以便更全面的替代 flash 功能。盡管還有很多有待完善的地方,但是作為一個新的瀏覽器特性,在某些地方還是能夠極大地增強用戶體驗。

1. 標準調用方式

要對某個元素使用全屏特效,標準的流程是:

調用這個元素對象的 requestFullscreen() 方法;

瀏覽器將元素全屏顯示,改變相關的屬性值,然后觸發 document 的 fullscreenchange 事件;

退出全屏時有兩種方式,一種是默認的按 ESC 鍵退出,一種是調用 document 的 exitFullscreen() 方法;

瀏覽器將元素退出全屏顯示,改變相關屬性值,再次觸發 fullscreenchange 方法。

瀏覽器在改變全屏狀態時修改的相關屬性,是指修改當前全屏狀態有否、全屏顯示的元素對象,這些屬性都是只讀的。

瀏覽器觸發 fullscreenchange 事件,默認不做任何處理,內部的處理函數需要編程人員自行判斷當前全屏狀態后,進行相應處理。
對應的,規范中還添加了一個 :fullscreen 偽類,對當前全屏的元素進行樣式定義。

2. 封裝API

Fullscreen 目前只有兩個方法:進入全屏、退出全屏,三個屬性(全部是只讀的):是否支持全屏、當前全屏狀態、當前全屏元素,以及一個在全屏狀態改變時觸發的事件( Using full-screen mode 中提到還有一個 fullscreenerror,但是我沒有測試出如何才能觸發這個事件 )。與 W3 草案 相比,FireFox 的實現更符合標準,而 webkit 內核瀏覽器中的方法則要自我很多。
所有的方法和屬性中,只有 requestFullscreen() 是 element 對象的方法,其他全部是 document 對象所有的方法和屬性。

2.1 進入全屏:element.requestFullscreen()

將 element 全屏顯示。webkit內核瀏覽器和Firefox表現不同,前者只要求element是DOM元素即可,后者則要求DOM必須是文檔流中的元素,比較嚴格,否則不能全屏顯示。
出于安全考慮,全屏狀態下默認是不允許用戶輸入的。webkit 內核瀏覽器會阻止除方向鍵、控制鍵之外的鍵盤輸入,FireFox 會在輸入時發出要求用戶退出全屏狀態的提示。前者可以通過在方法 webkitRequestFullScreen() 中傳入參數 Element.LLOW_KEYBOARD_INPUT 允許用戶輸入,但 Safari 一旦傳入該參數,整個 Fullscreen 功能都會壞掉(這應該是 Safari 的一個bug);后者直接就可以輸入,除了有個煩人的提示。

webkit 瀏覽器中可以通過只讀屬性 document.webkitFullScreenKeyboardInputAllowed 查看當前是否允許全屏狀態下的輸入。

/**
 * 標準化 requestFullscreen 方法
 * @param {DOM} elem 要全屏顯示的元素(webkit下只要是DOM即可,Firefox下必須是文檔中的DOM元素)
 */
function requestFullscreen( elem ) {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    }
    else if (elem.webkitRequestFullScreen) {
        // 對 Chrome 特殊處理,
        // 參數 Element.ALLOW_KEYBOARD_INPUT 使全屏狀態中可以鍵盤輸入。
        if ( window.navigator.userAgent.toUpperCase().indexOf( "CHROME" ) >= 0 ) {
            elem.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
        }
        // Safari 瀏覽器中,如果方法內有參數,則 Fullscreen 功能不可用。
        else {
            elem.webkitRequestFullScreen();
        }
    }
    else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    }
}

2.2 退出全屏:document.exitFullscreen()

從全屏狀態中退出。目前實現的方法都是 cancelFullScreen() ,而不是標準的 exitFullscreen()。

/**
 * 標準化 exitFullscreen 方法
 */
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
}

2.3 瀏覽器是否支持全屏:document.fullscreenEnabled

通過該屬性的boolean值判斷瀏覽器是支持 Fullscreen 功能。
webkit 內核的瀏覽器目前還沒有該屬性,因此只能通過能力判定來判斷是否支持全屏顯示功能。Firefox 已經有了對應的屬性定義。

/* 標準化 fullscreenEnabled 屬性 (只讀) */
document.fullscreenEnabled = ( function() {
        var doc = document.documentElement;
        return ( "requestFullscreen" in doc ) ||
               ( "webkitRequestFullScreen" in doc ) ||
               // 對Firefox除了能力判斷,還加上了屬性判斷
               ( "mozRequestFullScreen" in doc && document.mozFullScreenEnabled ) ||
               false;
    } )();

2.4 :document.fullscreenElement

當前全屏顯示的DOM元素。

/**
 * 標準化 fullscreenElement 屬性 (只讀)
 * 以同名方法替代
 */
function fullscreenElement() {
    return document.fullscreenElement ||
           document.webkitCurrentFullScreenElement ||
           document.mozFullScreenElement ||
           null;
}

2.5 當前全屏狀態:document.fullscreen

該屬性并未在2012/6/3的 w3草案 中出現,但在Using full-screen mode 一文中介紹了該屬性。其值為 boolean 類型,判斷當前文檔的全屏狀態。

如果最終去掉這個判斷全屏狀態的屬性,我們仍然可以通過 document.fullscreenElement 的值是否為 null 來判斷全屏與否

/**
 * 標準化 fullscreen 屬性 (只讀)
 * 以同名方法替代
 */
function fullscreen() {
    return document.fullscreen ||
           document.webkitIsFullScreen ||
           document.mozFullScreen ||
           false;
}

2.6 全屏狀態改變事件:fullscreenchange

該事件要綁定在 document 上,該事件僅在全屏狀態改變時觸發,默認沒有任何動作。

/* 綁定 document 的 fullscreenchange 事件 */
document.addEventListener(
    "fullscreenchange", // webkitfullscreenchange/mozfullscreenchange
    function( evt ){
        //todo 全屏狀態改變時的時間處理。
        //默認不會有任何處理,需要自己判斷當前屏幕全屏與否,做出相應處理。
    },
    false
);

/* 如果使用 jQuery : */
$( document ).bind(
    "fullscreenchange webkitfullscreenchange mozfullscreenchange",
    function(){
        //todo code
    }
);
3. 全屏樣式設置

標準中,通過 :fullscreen 偽類對全屏的元素進行樣式定義。

默認情況下,瀏覽器只會簡單地將元素設置為全屏顯示。如果該元素全屏后,高度比屏幕還高,超出的部分將會被隱藏。為了將超出部分可以滾動顯示,最頂層全屏顯示的元素要特別設置:

position : fixed;
top      : 0;
left     : 0;
width    : 100%;
height   : 100%;
overflow : auto;

一般情況下,要全屏顯示的元素是不能像上面這樣設置的。那么我們可以變通下,設置一個

,包圍要全屏的元素,然后將這個
設置為全屏,上面的樣式定義就可以定義在這個
上,相應的,:fullscreen 將會作用在這個
上。這樣,過長的元素就可以在這個包圍層內滾動顯示。

4. 特別注意

目前 FireFox 10、Safari 5.1+、Chrome 15+ 支持全屏

可以使任意元素全屏顯示,不只是整個頁面

全屏只能從事件觸發(用戶操作),而不能用代碼直接觸發

全屏狀態下,webkit 內核瀏覽器默認會阻止除方向鍵、控制鍵之外的鍵盤輸入,FireFox 會在輸入時發出退出全屏狀態提示。處理方法在 封裝API 部分有說明。

下面是實際中遇到的需要注意的地方:

全屏狀態切換需要時間。執行 requestFullscreen() 后,并不會立即進入全屏狀態,對應的全屏屬性不會立即更改,而是有一個執行時間。因此,只能在 fullscreenchange 事件觸發后才代表進入了全屏狀態。但是在 fullscreenchange 事件中調用 $(window).width() 并不總能得到全屏的尺寸,這個現象很奇怪。如果需要屏幕尺寸,可以通過 window.screen.width 來獲得。

涉及修改DOM文檔須注意代碼位置。當用

包圍要全屏顯示的元素時,這段 javascript 代碼不應該在要全屏顯示的元素內部,否則這段代碼會被執行兩遍,而且第二遍不會在斷點中被監視到,原因將在后文詳細描述。

ESC 鍵不同系統功能不同。目前發現點擊 ESC 退出全屏時,mac系統不會再額外觸發鍵盤事件,但是win7系統下出發 fullscreenchange 事件后還會立馬觸發鍵盤事件,因此如果還有不希望被觸發的鍵盤事件,可以設置一個監視變量,在很短時間后再修改監視變量,以錯過這個立馬執行的時間。

5. 未涉及功能

iframe 元素的 allowfullscreen 屬性

::backdrop 偽類

具體其他細節可以參考 W3 草案

6. 結語

Fullscreen API 畢竟目前只是草案,尚未形成正式的標準,況且各個瀏覽器的實現情況也不完全相同,甚至細節上的實現差別更可能引發預想不到的問題。但作為漸進增強方式使用的新功能,能夠極大的增強用戶體驗。仍要根據規范的完善,不斷改進我們的代碼。
詳細代碼可以參考:https://github.com/calefy/calefy.github.com/blob/master/js/Fullscreen.js

參考

W3 草案 2012/6/3版

Using full-screen mode

Enhance Your Website with the FullScreen API

Using the Fullscreen API in web browsers

代碼參考 jQuery Fullscreen 插件

本文參考

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49868.html

相關文章

  • Fullscreen API 全屏顯示網頁

    摘要:進入全屏將全屏顯示。內核瀏覽器和表現不同,前者只要求是元素即可,后者則要求必須是文檔流中的元素,比較嚴格,否則不能全屏顯示。內核瀏覽器會阻止除方向鍵控制鍵之外的鍵盤輸入,會在輸入時發出要求用戶退出全屏狀態的提示。 第一次看到應用 Fullscreen API 全屏顯示網頁,是 FaceBook 中的照片放大。作為一個比較新的 API,目前只有 Safari、Chrome 和 FireF...

    TNFE 評論0 收藏0
  • Fullscreen API 全屏顯示網頁

    摘要:進入全屏將全屏顯示。內核瀏覽器和表現不同,前者只要求是元素即可,后者則要求必須是文檔流中的元素,比較嚴格,否則不能全屏顯示。內核瀏覽器會阻止除方向鍵控制鍵之外的鍵盤輸入,會在輸入時發出要求用戶退出全屏狀態的提示。 第一次看到應用 Fullscreen API 全屏顯示網頁,是 FaceBook 中的照片放大。作為一個比較新的 API,目前只有 Safari、Chrome 和 FireF...

    zsirfs 評論0 收藏0
  • js全屏模式輕松掌握[局部元素全屏展示]

    摘要:推薦這么做,因為如果每個都要這樣重復的判斷瀏覽器前綴,那也太惡心了瀏覽器是否支持全屏模式屬性返回一個布爾值,表示當前文檔是否可以切換到全屏狀態。 showImg(https://segmentfault.com/img/remote/1460000017229080?w=700&h=467); 我第一次對網頁全屏模式有概念,是那種網頁播放視頻的全屏播 放的那種。感覺很強,前幾個星期有個...

    amc 評論0 收藏0

發表評論

0條評論

wangxinarhat

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<