iframe là một thẻ mới được cung cấp trong tiêu chuẩn HTML5. Bài viết này giới thiệu một đoạn mã ví dụ HTML giúp thực hiện chức năng toàn màn hình với iframe, mang tính tham khảo cao cho những ai đang quan tâm.
Giới thiệu
Thực hiện thao tác toàn màn hình trong trình duyệt HTML, dựa trên jQuery
Toàn màn hình cho iframe hoặc toàn màn hình cho một thẻ cụ thể
Cách thực hiện
CSS:
/** Toàn màn hình */
.lay-dbclick-box{
position: relative;
width: 100%;
height: 100%;
}
.lay-dbclick-screen{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
}
.lay-fullScreen{
position: fixed;
left: 0;
top: 0;
border-radius: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
z-index: 9999999999999;
}
HTML
Điểm mấu chốt là .lay-dbclick-box và .lay-dbclick-screen, trong đó iframe là phần hiển thị nội dung.
<div class=”lay-dbclick-box”>
<iframe src=”” width=”100%” height=”100%” id=”fullb” frameborder=”0″ allowfullscreen=”” ></iframe>
<div class=”lay-dbclick-screen”></div>
</div>
JavaScript:
openFullScreen();
/**
* ——————————————————————————————————-
* Chức năng toàn màn hình chung
*/
function openFullScreen(){
// Nhấp đúp để bật/tắt toàn màn hình
$(“.lay-dbclick-screen”).dblclick(function(){
var val = $(this).parent().attr(“lay-svalue”);
if(!val){
$(this).parent().addClass(“lay-fullScreen”);
$(this).parent().attr(“lay-svalue”, 1);
fullScreen();
}else{
$(this).parent().removeClass(“lay-fullScreen”);
$(this).parent().attr(“lay-svalue”, “”);
exitFullscreen();
}
})
// Lắng nghe sự kiện thay đổi toàn màn hình
document.addEventListener(“fullscreenchange”, function(){
if (getFullscreenElement() == null) {
console.log(“—————–[Thoát toàn màn hình]————–“)
$(“.lay-fullScreen”).attr(“lay-svalue”, “”);
$(“.lay-fullScreen”).removeClass(“lay-fullScreen”);
exitFullscreen();
}else {
console.log(“—————–[Bật toàn màn hình]————–“)
}
})
}
/**
* ——————————————————————————————————-
* Lấy phần tử đang ở chế độ toàn màn hình
*/
function getFullscreenElement(){
return (
document[‘fullscreenElement’] ||
document[‘mozFullScreenElement’] ||
document[‘msFullScreenElement’] ||
document[‘webkitFullscreenElement’] || null
);
}
/**
* ——————————————————————————————————-
* Bật toàn màn hình
*/
function fullScreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
/**
* ——————————————————————————————————–
* Thoát khỏi chế độ toàn màn hình
*/
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Bài viết đến đây là kết thúc phần hướng dẫn về cách sử dụng HTML để hiển thị iframe ở chế độ toàn màn hình. Để biết thêm các bài viết liên quan, bạn có thể tìm kiếm trên các trang lập trình hoặc tham khảo ở phần bài viết gợi ý phía dưới. Cảm ơn bạn đã quan tâm theo dõi!
Tài nguyên này được người dùng tải lên và nội dung được lấy từ Internet. Trang web này chỉ giới thiệu miễn phí để học tập và chia sẻ. Nếu có bất kỳ vấn đề bản quyền hoặc vấn đề nào khác, vui lòng liên hệ với biên tập viên của trang web này để xử lý!
Lưu ý quan trọng: : Nếu phần mềm liên quan đến thanh toán, thành viên, nạp tiền, v.v., thì đây là những hành động của nhà phát triển phần mềm hoặc công ty sở hữu phần mềm đó và không liên quan gì đến trang web này. Cư dân mạng cần phải tự đưa ra phán đoán của mình.
