vue中通过JS让页面全屏显示
在vue项目中做一个可以控制页面全屏展示的效果,点击页面上的按钮,实现全屏效果正常页面:代码实现:实现全屏主要是通过requestFullScreen()方法用来在全屏模式下打开一个元素。此方法需要特定的前缀才能在不同的浏览器中工作。使用document.exitFullscreen()方法取消全屏模式。使用注意事项1、requestFullscreen方法只能由用户触发。2、页面跳转需先退出全屏
·
在vue项目中做一个可以控制页面全屏展示的效果,点击页面左上角的FullScreen按钮,实现全屏效果,我这里按钮做的不明显有点看不到。
效果图
正常页面:
代码实现:
实现全屏主要是通过requestFullScreen()方法用来在全屏模式下打开一个元素。
此方法需要特定的前缀才能在不同的浏览器中工作。使用document.exitFullscreen()方法取消全屏模式。
使用注意事项
1、requestFullscreen方法只能由用户触发。
2、页面跳转需先退出全屏
3、进入全屏的元素,将脱离其父元素,所以可能导致之前某些css的失效
解决方案:使用 :full-screen伪类 为元素添加全屏时的样式(使用时为了兼容注意添加-webkit、-moz或-ms前缀)
我这里是使用原生的方法修改了css
4、一个元素A全屏后,其子元素要再全屏,需先让元素A退出全屏
onMounted(() => {
// 给页面的按钮绑定事件,点击可以触发全屏
setTimeout(() => {
document.getElementById('signinBbtn').onclick = function (params) {
requestFullScreen(document.documentElement);
let doc = document.getElementsByClassName('sginInContainer')[0]
doc.style.position = 'fixed'
doc.style.left = 0
doc.style.top = 0
doc.style.width = '100vw'
}
}, 1000)
// 使用window.onresize 监听页面进入全屏和退出全屏操作,并作处理
window.onresize = function () {
let doc = document.getElementsByClassName('sginInContainer')[0]
if (!doc) { return }
if (document.fullscreenElement) {
console.log('进入全屏')
} else {
// 退出全屏的时候恢复原来的样式
console.log('退出全屏')
doc.style.position = 'relative'
doc.style.left = 'inherit'
doc.style.top = 'inherit'
doc.style.width = 'inherit'
}
};
})
// 实现全屏的方法
const requestFullScreen = (element) => {
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏 这里没有用到 ,esc键和F11可以直接退出,
function exitFull() {
// 判断各种浏览器,找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //FireFox
document.webkitExitFullscreen || //Chrome等
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
更多推荐
所有评论(0)
您需要登录才能发言
查看更多评论