js实现浏览器全屏

当页面自动触发全屏会报错,并且浏览器会给一个警告如下,意思是浏览器全屏API只能由用户手势触发。尝试过window.onload、定时器、鼠标移动事件都不能实现全屏,点击事件可以。
全屏api文档地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

简单实现点击全屏代码:

<body>
    <button onclick="fullScreen()">浏览器全屏</button>
</body>
<script type="text/javascript">
    //实现全屏
    function fullScreen() {
      // documentElement 属性以一个元素对象返回一个文档的文档元素
        var el = document.documentElement;
        el.requestFullscreen||el.mozRequestFullScreen||el.webkitRequestFullscreen||el.msRequestFullScreen?
        el.requestFullscreen()||el.mozRequestFullScreen()|| el.webkitRequestFullscreen()||el.msRequestFullscreen():null;
    }

</script>

谷歌、火狐、Edg、360极速模式都可以实现全屏,360兼容模式不生效

window.open实现浏览器工具栏等的隐藏

效果如下:
在这里插入图片描述
代码如下:

window.open ('newHtml.html','_blank',
'width='+(window.screen.availWidth)+',height='+(window.screen.availHeight)+
',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=yes,location=no, status=no')
window.open定义和用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace*)

参数说明
  • URL
    可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口。
  • name
    可选。指定target属性或窗口的名称。支持以下值:
    _blank 加载到一个新的窗口,这是默认
    _parent加载到父框架
    _self替换当前页面
    _top 替换任何可加载的框架集
    *name* 窗口名称
  • specs
    channelmode=yes\|no\|1\|0是否要在影院模式显示 window,默认是没有的,仅限IE浏览器directories=yes\|no\|1\|0是否添加目录按钮,默认是肯定的,仅限IE浏览器
    fullscreen=yes\|no\|1\|0浏览器是否显示全屏模式,默认是没有的,在全屏模式下的 window,还必须在影院模式,仅限IE浏览器
    height=pixels窗口的高度,最小值为100
    left=pixels该窗口的左侧位置
    location=yes\|no\|1\|0是否显示地址字段,默认值是yes
    menubar=yes\|no\|1\|0是否显示菜单栏,默认值是yes
    resizable=yes\|no\|1\|0是否可调整窗口大小,默认值是yes
    scrollbars=yes\|no\|1\|0是否显示滚动条,默认值是yes
    status=yes\|no\|1\|0是否要添加一个状态栏,默认值是yes
    titlebar=yes\|no\|1\|0是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框,默认值是yes
    toolbar=yes\|no\|1\|0是否显示浏览器工具栏,默认值是yes
    top=pixels窗口顶部的位置,仅限IE浏览器
    width=pixels窗口的宽度,最小值为100
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐