Xin chào mọi người. Sau một thời gian tạm dừng series Web APIs để tìm hiểu mấy thứ linh tinh khác thì hôm này mình đã trở lại rồi đây. Và bài viết hôm nay của mình sẽ giới thiệu qua về Page Visibility API, một thứ mà chúng ta ít quan tâm đến. Vậy nó là gì, chúng ta hãy cùng xem nhé. Go Go!
Intro
Page Visibility API cung cấp một vài sự kiện giúp để theo dõi xem khi nào thì document (cửa sổ hiện tại) là visible hay hidden.
Page Visibility API giúp ích trong việc tiết kiệm tài nguyên và cải thiện hiệu suất bằng cách tránh cho trang web thực hiện các task không cần thiết khi document ở trạng thái hidden (khi người dùng chuyển tab, minimize trình duyệt). Chúng ta cũng có thể sử dụng nó để đếm thời gian truy cập chẳng hạn.
Brower support
API được hỗ trợ hầu hết ở các trình duyệt (bao gồm cả IE10 và IE11
)
Demo
http://daniemon.com/tech/webapps/page-visibility/
Ở ví dụ này, video sẽ dừng lại khi bạn chuyển sang tab khác và bật lại khi bạn trở lại tab đó, nó được xử lý ở đoạn code sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <span class="token comment">// Set the name of the hidden property and the change event for visibility</span> <span class="token keyword">var</span> hidden<span class="token punctuation">,</span> visibilityChange<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> document<span class="token punctuation">.</span>hidden <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Opera 12.10 and Firefox 18 and later support </span> hidden <span class="token operator">=</span> <span class="token string">"hidden"</span><span class="token punctuation">;</span> visibilityChange <span class="token operator">=</span> <span class="token string">"visibilitychange"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> document<span class="token punctuation">.</span>msHidden <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> hidden <span class="token operator">=</span> <span class="token string">"msHidden"</span><span class="token punctuation">;</span> visibilityChange <span class="token operator">=</span> <span class="token string">"msvisibilitychange"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> document<span class="token punctuation">.</span>webkitHidden <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> hidden <span class="token operator">=</span> <span class="token string">"webkitHidden"</span><span class="token punctuation">;</span> visibilityChange <span class="token operator">=</span> <span class="token string">"webkitvisibilitychange"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> videoElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"videoElement"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// If the page is hidden, pause the video;</span> <span class="token comment">// if the page is shown, play the video</span> <span class="token keyword">function</span> <span class="token function">handleVisibilityChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">[</span>hidden<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> videoElement<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> videoElement<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Warn if the browser doesn't support addEventListener or the Page Visibility API</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> document<span class="token punctuation">.</span>addEventListener <span class="token operator">===</span> <span class="token string">"undefined"</span> <span class="token operator">||</span> hidden <span class="token operator">===</span> undefined<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// Handle page visibility change </span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>visibilityChange<span class="token punctuation">,</span> handleVisibilityChange<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// When the video pauses, set the title.</span> <span class="token comment">// This shows the paused</span> videoElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"pause"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'Paused'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// When the video plays, set the title.</span> videoElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"play"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'Playing'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Kết luận
Bài viết hôm nay ngắn vậy thôi. Hy vọng sẽ giúp ích được cho mọi người ở dự án nào đó sắp tới. Chúc mọi người thành công 
Tham khảo
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API