js实现全屏

最新推荐文章于 2024-07-19 15:49:07 发布

原创最新推荐文章于 2024-07-19 15:49:07 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #全屏

javascript 同时被 2 个专栏收录

56 篇文章

订阅专栏

html5

17 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页全屏切换的方法，通过检测浏览器是否处于全屏状态，并根据不同浏览器的API调用来进入或退出全屏模式。适用于主流浏览器，包括解决跨域iframe全屏问题。

function toggleFullScreen() {
	var isFull = window.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || false;
	var de = document.documentElement;
	if (isFull === false) {
		if (de.requestFullscreen) {
			de.requestFullscreen();
		} else if (de.mozRequestFullScreen) {
			de.mozRequestFullScreen();
		} else if (de.webkitRequestFullScreen) {
			de.webkitRequestFullScreen();
		} else if (de.msRequestFullscreen) {
			de.msRequestFullscreen();
		}
	} else {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}
}

参考：

https://www.cnblogs.com/freeweb/p/5736411.html

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265028(v=vs.85)

ps：如果涉及到iframe跨域，可以通过possmessage通知父级执行全屏