当前位置: 首页 > news >正文

vue、js实现页面全屏

浏览器可能是处于安全的考虑,无法实现进入页面自动全屏,只能通过用户操作的形式触发全屏!!!

ps:可以通过登录按钮触发登录成功自动全屏

实测vue中可通过登录点击事件加载组件自动全屏

import { useFullscreen } from '@vueuse/core'const { isFullscreen, enter, exit, toggle } = useFullscreen();toggle();

同理这个应该也可以实现(没有测试)

import screenfull from 'screenfull'
// 切换全屏
screenfull.toggle()

第一种形式:点击按钮实现全屏和退出全屏 

<!DOCTYPE html>
<html><head><script>window.onload = openfullscreen();function launchIntoFullscreen(element) {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}}function openfullscreen() {launchIntoFullscreen(document.documentElement);}function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}window.close();}function fix() {var screenwidth = screen.width;var screenhei = screen.height;document.getElementById("ifam").width = screenwidth;document.getElementById("ifam").height = screenhei;}</script><style>#ifam {position: fixed;left: 0%;top: 0%;z-index: -1;}#fullscreen {position: fixed;left: 0%;top: 0%;z-index: 1;}</style></head><body onload="fix()"><div id="fullscreen"><button onclick="openfullscreen()">Open</button><button onclick="exitFullscreen()">Exit</button></div><iframe id="ifam" src="https://docs.python.org"></iframe></body>
</html>

第二种形式:点击页面任何位置实现全屏 

<html><head><script language="jscript">function goFullscreen() {// Must be called as a result of user interaction to workmf = document.getElementById("main_frame");mf.webkitRequestFullscreen();mf.style.display = "";}function fullscreenChanged() {if (document.webkitFullscreenElement == null) {mf = document.getElementById("main_frame");mf.style.display = "none";}}document.onwebkitfullscreenchange = fullscreenChanged;document.documentElement.onclick = goFullscreen;document.onkeydown = goFullscreen;</script></head><body style="margin: 0"><h1>Click anywhere or press any key to browse <u>Python documentation</u> infullscreen.</h1><iframeid="main_frame"src="https://docs.python.org"style="width: 100%; height: 100%; border: none; display: none"></iframe></body>
</html>

http://www.lryc.cn/news/157289.html

相关文章:

  • 从零开始探索C语言(四)----循环
  • JS 替换 JSON 数组中的指定字段名
  • WebSocket消息推送
  • 二维码智慧门牌管理系统:让城市管理更智能、便捷
  • React动态添加标签组件
  • [Linux]套接字通信
  • MySQL的故事——MySQL架构与历史
  • 手写Mybatis:第12章-完善ORM框架,增删改查操作
  • 【1】DDR---容量计算
  • YashanDB:潜心实干,数据库核心技术突破没有捷径可走
  • Talk | ICCV‘23南洋理工大学博士后李祥泰:面向统一高效的视频分割方法设计
  • 怎样把英语视频字幕翻译成中文
  • 智慧铁路:机车整备场数字孪生
  • ImageSharp.Web实战:轻松搭建高效图片服务
  • 端口扫描-安全体系-网络安全技术和协议
  • C# wpf 实现截屏框热键截屏功能
  • springboot + activiti实现activiti微服务化
  • c语言练习41:深入理解字符串函数strlen strcpy strcat
  • Vue3+Vue-i18n+I18N ALLY+VSCODE 自动翻译多国语言
  • idea意外退出mac
  • 百度智能云千帆大模型平台2.0来了!从大模型到生产力落地的怪兽级平台!!
  • k8s nfs-client 添加挂载参数 —— 筑梦之路
  • 【算法】堆排序 详解
  • 解决Maven依赖下载问题:从阿里云公共仓库入手
  • 【Java基础】学习笔记2 - 数组运算符与main方法
  • stable diffusion实践操作-复制-清空-保存提示词
  • 【Spring 事务和事务传播机制】
  • 【爬虫】实验项目二:模拟登录和数据持久化
  • 图文版:以太网二层接口类型(含配套习题)
  • 生信豆芽菜-机器学习筛选特征基因