JavaScript >> Javascript 文檔 >  >> jQuery

使用 FullScreen API 增強您的網站

每六週推出新瀏覽器版本的好處之一是引入新功能的速度很快。從夜間構建到正式發布的過渡只有幾週的時間。這意味著即使是那些密切關注功能列表的人也可能會錯過一兩個 api。

全屏 API 就是這種情況。彷彿一夜之間,它從一個簡潔的實驗變成了一個被超過一半的瀏覽器支持的功能。現在你可能想知道這與我們多年來使用的常規全屏有什麼不同。

你需要知道的

使用此 api,您不僅可以全屏顯示整個頁面,還可以顯示其中的單個元素(這是常規全屏無法做到的)。這裡的目的是允許全屏 HTML5 視頻和遊戲,以便我們最終可以將 HTML5 聲明為 Flash 的可行替代品。

簡而言之,以下是您需要了解的有關 FullScreen API 的內容:

  • 適用於 Firefox 10 , SafariChrome;
  • 您使用新的 requestFullScreen() 觸發它 方法;
  • 它可以全屏顯示任何元素,而不僅僅是整個頁面;
  • 出於安全原因,全屏只能從事件處理程序中觸發(由用戶發起);
  • 同樣出於安全考慮,Safari 會阻止除箭頭和控制鍵之外的所有鍵盤輸入,其他瀏覽器會在鍵入時顯示警告消息;
  • API 仍在開發中,因此您必須使用供應商特定的方法(以 moz 為前綴 和 webkit );

允許開發人員以編程方式佔用用戶屏幕的想法並非沒有嚴重的安全隱患,這就是鍵盤使用受到限制的原因。當然,全屏鍵盤輸入有很多合法用途,這將在 API 的未來修訂版中通過某種權限提示加以解決。

然而,即使以目前有限的形式,API 仍然為我們提供了增強最終用戶體驗的機會。

基礎知識

根據 W3 草案,我們可以使用許多方法和屬性來幫助我們完成將元素切換到全屏的任務。

var elem = document.getElementById('#content');

// Make this element full screen asynchronously
elem.requestFullscreen();

// When a full screen change is detected,
// an event will be dispatched on the document

document.addEventListener("fullscreenchange",function(){
    // Check if we are in full screen
    if(document.fullscreen)){
        // We are now in full screen!
    }
    else{
        // We have exited full screen mode
    }

}, false);

// We can also exit the full screen mode with code

document.exitFullscreen();

然而,此時處理 API 相當麻煩,因為目前還沒有瀏覽器支持這些方法 - 我們需要使用供應商特定的方法,例如 elem.mozRequestFullScreen()elem.webkitRequestFullScreen() .

API 還引入了一個新的 CSS 偽選擇器,您可以使用它來設置全屏元素的樣式。

#content:fullscreen {
    font-size: 18;
}

當然,不言而喻,您還需要提供 moz 和 webkit 前綴版本。但是有一個更簡單的解決方案。

jQuery 插件

有一個更優雅的解決方案,而不是為每個瀏覽器檢查一堆醜陋的代碼。您可以使用 jQuery FullScreen 插件,它可以解決各種瀏覽器的差異,並為您提供觸發全屏模式的簡單方法。

$('#fsButton').click(function(e){
    // Use the plugin
    $('#content').fullScreen();
    e.preventDefault();
});

這將使#content 元素全屏顯示。該插件還為 jQuery 支持對象添加了一個標誌,因此您可以有條件地顯示您的全屏按鈕或觸發器:

if($.support.fullscreen){
    // Show the full screen button
    $('#fsButton').show();
}

要退出該模式,請再次調用 fullScreen() 方法。

該插件將 .fullScreen 類添加到您的元素中,因此您可以對其進行樣式設置,而無需擔心特定於瀏覽器的版本。現在讓我們用它為世界做點好事吧!

有趣的部分

如果您是網站所有者,您可能做出了會降低用戶體驗的決定。這應該不會讓您感到意外——您需要展示廣告,您需要一個搜索框、一個導航欄、一個 twitter 小部件、一個評論部分以及所有使您的網站成為現實的東西。這些都是必要的,但會使您的內容(人們來到您網站的目的)更難閱讀。

在字體不合適之前,字體的大小也有實際限制,更不用說字體的選擇了。如果您有側邊欄,這也會限制您的內容可以佔用的水平空間。

但是我們可以使用新的 API 來解決這個問題。我們將使用該功能將您網站的內容部分全屏顯示,從而改善讀者的閱讀體驗,即使在筆記本電腦和上網本等帶有小顯示器的設備上也是如此。

製作閱讀模式

這很簡單,我們只需要某種按鈕來觸發 FullScreen 插件。我們可以使用 $.support.fullscreen 標誌來測試當前瀏覽器是否支持 API。如果是,我們將在頁面中添加全屏按鈕。

if($.support.fullscreen){

    var fullScreenButton = $('<a class="goFullScreen">').appendTo('#buttonStrip');

    fullScreenButton.click(function(e){
        e.preventDefault();
        $('#main').fullScreen();
    });
}

當#main div 被全屏顯示時,它被分配了 100% 的寬度和高度。如果我們希望它位於屏幕中間,我們將不得不解決這個問題。這將需要一些額外的樣式,僅在全屏模式下應用。

a.goFullScreen{
    /* The styling of the full screen button goes here */
}

/* The following styles are applied only in Full Screen mode */

#main.fullScreen{
    /* Adding a width and margin:0 auto to center the container */
    width: 860px;
    margin: 0 auto;

    /* Increasing the font size for legibility*/
    font: 17px serif;
    padding: 45px 45px 10px;
}

#main.fullScreen h1{
    /* Styling the heading */
    font: 56px/1.1 Cambria,"Palatino Linotype",serif;
    text-align: center;
}

#main.fullScreen h3{
    /* Subheadings */
    font: 28px Cambria,"Palatino Linotype",serif;
}

#main.fullScreen #postAuthor{
    /* Centering the post author info */
    /* ... */
}

/* Hiding unneeded elements and ads */

#main.fullScreen #featuredImage,
#main.fullScreen #topMiniShare,
#main.fullScreen #wideZineBanner,
#main.fullScreen #downloadDemo{
    display:none;
}

這就是它的全部!只有支持全屏模式的瀏覽器才會顯示該按鈕,用戶將享受更好、無干擾的閱讀體驗。

完成!

網站中有很多地方可以使用全屏視圖 - 從視頻和基於畫布的遊戲,到報告和打印預覽對話框。我個人希望看到它用於信息圖表和演示文稿。有了這樣一個有用的功能,我們可以走很長一段路。


Tutorial JavaScript 教程
  1. 使用 MERN 堆棧的絕對力量構建一個 Fullstack 公路旅行地圖應用程序🔥

  2. Discord 機器人只回復發起者

  3. 是否可以使用 CSS 根據背景顏色更改文本顏色?

  4. 在 Node.js 中生成 UUID 的 3 種有效方法

  5. 無法在 React Native 中顯示圖像

  6. 你見過的高級開發人員最糟糕的代碼是什麼?

  7. 從 Node.js 應用程序使用 Pino 日誌

  1. React Components 和 props 到底是什麼?

  2. 生成 JHipster + Svelte/Kit Web 應用程序

  3. 不,我不開發另一個 JS 框架!

  4. 使用 react、django、react-native 和 AWS 構建倉庫管理解決方案。

  5. Animatly.io 動畫圖標和插圖平台

  6. 讓我們使用 Spring Boot 和 Vue.js 從頭開始開發電子商務應用程序

  7. 是時候增強您的 HTML 技能了! 🔋

  1. 你的第一個帶有 Apollo 客戶端的 React GraphQL 前端:簡要介紹

  2. 🌙 如何使用 Vue.js 組件實現暗模式

  3. 角 13 + NestJs + NX

  4. 如何在 React 應用程序中使用 Ant Design 的圖標