js设置页面全屏

最新推荐文章于 2024-06-29 00:44:50 发布
最新推荐文章于 2024-06-29 00:44:50 发布
阅读量1.6k 收藏 1
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/zxf100/p/10897992.html
版权

html代码

<!-- 全屏按钮 -->
    <img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按钮" />

js代码

    // 设置全屏
$('#alarm-fullscreen-toggler').on('click', function (e) {
    var element = document.documentElement;     // 返回 html dom 中的root 节点 <html>
    
    if(!$('body').hasClass('full-screen')) {
        $('body').addClass('full-screen');
        $('#alarm-fullscreen-toggler').addClass('active');
        // 判断浏览器设备类型
        if(element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen){   // 兼容火狐
            element.mozRequestFullScreen();
        } else if(element.webkitRequestFullscreen) {    // 兼容谷歌
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {   // 兼容IE
            element.msRequestFullscreen();
        }
        // 切换全屏按钮
        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/close.png');
    } else {            // 退出全屏
        console.log(document);
        $('body').removeClass('full-screen');
        $('#alarm-fullscreen-toggler').removeClass('active');
        //  退出全屏
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        // 切换全屏按钮
        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/open.png');
    }
});

 

转载于:https://www.cnblogs.com/zxf100/p/10897992.html

weixin_33895516
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现网页全屏效果
02-11
点击让浏览器网页进入全屏和退出全屏,jq插件，需加载jquery
js实现简单页面全屏
10-16
主要为大家详细介绍了js实现简单页面全屏的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
H5实现浏览器全屏API(全屏进入和全屏退出)
热门推荐
qq_35515563的博客
06-05 1万+
【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();   // Firefox 10+ element.mozRequestFullScreen(); document.mozCance
适配所有浏览器的原生js进入/退出全屏代码看这里（Safari可用！！）＞＞
最新发布
m0_50103979的博客
06-29 385
支持所有浏览器的原生js全屏代码接机牌，并改出了一个手持弹幕。分享给朋友之后他告诉我，没办法全屏。可是我的所有设备显示都是正常的啊，一问，原来是safari手机版。到Caniuse网站上一查发现，我原先使用的Webapi不支持safari（准确的说是只有手机版的safari不支持）。
使用 JavaScript 切换全屏模式
allway2的博客
11-22 3652
欢迎来到如何使用Javascript切换全屏模式的快速教程和示例。是的，老祖母的互联网时代现在已经结束了。我希望它对您的项目有所帮助，如果您想与本指南分享任何内容，请随时在下面发表评论。是的，我们只能用于在元素处于全屏模式时对元素应用样式。源代码，我已经在 MIT 许可证下发布了它，所以请随意在它之上构建或在您自己的项目中使用它。以上就是主要教程的全部内容，这里有一小节介绍一些可能对您有用的附加功能和链接。好吧，现在让我们进入在 Javascript 中切换全屏模式的示例。是的，正如介绍片段中宣传的那样。
js实现页面全屏展示
小小•愿望的博客
01-22 1225
最近做一个网页项目，用户要求可以全屏展示，进入系统后隐藏地址栏，于是乎，经过调研就选择了全屏`API`，即便如此还是遇到了一些问题，总结一下，写下此篇文章。
js 页面全屏控制
m0_37158404的博客
08-21 287
handleFullScreen(true); // 全屏模式 handleFullScreen(false); // 退出全屏 // 全屏控制 function handleFullScreen(fullScreen) { if (fullScreen) { // 全屏模式 var docElm = document.documentElement; if (docEl...
js模拟F11页面全屏显示
10-16
主要为大家详细介绍了js模拟实现F11使页面全屏显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现窗口全屏示例详解
10-16
这个示例详细讲解了如何使用JS将页面、特定元素切换至全屏模式，并处理全屏状态的改变及退出全屏的操作。以下是对相关知识点的详细说明： 1. **全屏API**： - `element.requestFullScreen()`: 这是W3C推荐的标准...
js控制页面的全屏展示和退出全屏显示的方法
10-24
主要介绍了js控制页面的全屏展示和退出全屏显示的方法,实例分析了javascript控制页面全屏效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS图片背景全屏代码
04-09
"JS图片背景全屏代码"是针对这一需求的解决方案，它利用JavaScript语言来实现图片在不同屏幕尺寸下自动适应全屏显示。此代码兼容主流浏览器，包括对老版本IE6的支持，这在现代Web开发中是相当难得的，因为IE6已经...
js控制div全屏
12-10
一個用jq插件，js實現div全屏,直接把js引用進你的項目，給div一個指定id，就能使用。
Js方法打开网页全屏显示 模拟F11
04-25
通过4种方法、模拟进入页面后自动将页面全屏展示、模拟浏览器的F11效果、很不错
三种js全屏模式
11-05
三种不同的全屏模式javascrip实现代码 ！
纯js，三行代码实现全屏模式
weixin_44132277的博客
01-12 413
三行代码实现全屏模式。在浏览器web中，点击全屏按钮，实现全屏，再次点击又恢复。
利用js如何做到让页面全屏和不全屏功能
cherry_zhang18的博客
05-06 358
Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。 以下demo是页面进行全屏和正常屏幕的，你也可以用元素来进行全屏，当然 只有包含在顶层文档（top-level document）内部的标准HTML元素、<svg>元素和<math>元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。这段是从https://develop.
js全屏模式 - Kaiqisan
Kaiqisan的博客
07-31 291
js全屏模式 観客のみんなさんこんにちは、Kaiqisanです，今天给大家带来的是全屏播放的使用方法，它一般用于播放器的全屏播放功能和H5小游戏中。与点击F11进入全屏模式具有一样的效果。 现在我们的html代码里有两个按钮 类名都是btn，怎样触发全屏观看全部在于您自己的选择(键盘鼠标触发都可以)，下面是全屏观看的代码，直接复制可使用。 let enter = document.getElementsByClassName('btn') enter[0].onclick = fun
用js控制进入全屏，退出全屏
StubbornAccepted的博客
08-16 3730
需求是这样的 ，有一个图标元素，点击后进入全屏，再次点击退出全屏。 实现代码：<li id="fullscreen"><a href="#" ><span class="glyphicon glyphicon-resize-full "></span></a></li> //控制全屏 function enterfullscreen() {//进入全屏 var docElm
js设置goole浏览器全屏
05-23
可以使用以下代码将 Google 浏览器设置为全屏： ```javascript if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } ``` 请注意，为了使浏览器进入全屏模式，必须在用户与页面进行交互后才能执行此操作。此外，全屏模式可能会受到浏览器的限制和权限问题，具体取决于用户的浏览器设置和设备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值