ความคิดเห็น: เราหายไปนานแล้วในการพิจารณาว่าผู้ใช้กำลังเรียกดูแท็บที่ระบุหรือไม่ ผู้ใช้เยี่ยมชมเว็บไซต์อื่น ๆ หรือไม่? พวกเขาเปลี่ยนกลับมาแล้วหรือยัง?
ตอนนี้อินเทอร์เฟซการมองเห็นหน้าใน HTML5 ให้วิธีการให้โปรแกรมเมอร์ใช้เหตุการณ์การมองเห็นหน้าเว็บเพื่อตัดสินสถานะการมองเห็นหน้าปัจจุบันและทำงานบางอย่างในลักษณะเป้าหมาย นอกจากนี้ยังมีเอกสารใหม่คุณสมบัติที่ได้รับการช่วยเหลือที่สามารถใช้งานได้
document.hided
เอกสารที่เพิ่งเข้ามาใหม่นี้แสดงให้เห็นว่าหน้าเว็บเป็นหน้าเว็บที่ผู้ใช้ดูในปัจจุบันโดยมีค่าของ ture หรือ false
document.visibilitystate
ค่าของ VisibilityState สามารถมองเห็นได้ (ระบุว่าหน้าเว็บถูกเปิดใช้งานในขณะนี้โดยเบราว์เซอร์และหน้าต่างจะไม่ย่อเล็กสุด) หรือซ่อนอยู่ (หน้าไม่เปิดใช้งานในหน้าแท็บในปัจจุบัน
เหตุการณ์การมองเห็น
มันง่ายมากที่จะฟังการเปลี่ยนแปลงการมองเห็นหน้า:
// เข้ากันได้กับเบราว์เซอร์ต่างๆ
var hidden, state, visibilitychange;
if (typeof document.hidden! == "undefined") {
ซ่อน = "ซ่อน";
VisibilityChange = "VisiabilityChange";
state = "VisibilityState";
} อื่นถ้า (typeof document.mozhidden! == "undefined") {
ซ่อน = "mozhidden";
VisibilityChange = "MozvisibilityChange";
state = "mozvisibilitystate";
} อื่นถ้า (typeof document.mshided! == "undefined") {
ซ่อน = "mshideding";
VisibilityChange = "msvisibilitychange";
state = "msvisibilityState";
} อื่นถ้า (typeof document.webkithidden! == "undefined") {
hidden = "webkithidden";
VisibilityChange = "WebKitVisibilityChange";
state = "webkitvisibilityState";
} </p> <p> // เพิ่มผู้ฟังเพื่อแสดงการเปลี่ยนแปลงสถานะในชื่อเรื่อง
document.addeventListener (VisibilityChange, function () {
document.title = document [state];
}, false); </p> <p> // การเริ่มต้น
document.title = document [state];
รหัสข้างต้นจะแก้ไขค่าของ document.title เมื่อการมองเห็นหน้าเปลี่ยนไป!
ดังนั้นคุณต้องใช้เหตุการณ์การมองเห็นเมื่อใด ตัวอย่างเช่นหากมีวิดีโอฝังตัวในหน้าของคุณที่กำลังเล่นอยู่เมื่อผู้ใช้สลับไปยังแท็บอื่นวิดีโอบนแท็บของคุณควรหยุดการเล่นโดยอัตโนมัติและเล่นต่อเมื่อผู้ใช้สลับกลับ ตัวอย่างเช่นหากเพจของคุณมีการดำเนินการรีเฟรชอัตโนมัติเมื่อผู้ใช้เปลี่ยนไปใช้แท็บอื่นคุณควรหยุดการรีเฟรชและดำเนินการต่อไปก่อนหน้านี้เมื่อผู้ใช้สลับกลับ