让HTML页面也可以实现全屏效果

作者：AllinToyou | 2024-03-21 23:31:50

踩

让HTML页面也可以实现全屏效果

当前页面全屏化

本人今天看到一个页面全屏化的功能,觉得很不错,以后可能用到,所以贴出来,让大家使用,转载的别人的代码,不喜勿喷,本人测试,非常好用,谢谢!

首先展示效果:

下面是代码

JavaScript代码:


function toggleFullScreen() {
	if (!document.fullscreenElement && // alternative standard method
		!document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods
		if (document.documentElement.requestFullscreen) {
			document.documentElement.requestFullscreen();
		} else if (document.documentElement.mozRequestFullScreen) {
			document.documentElement.mozRequestFullScreen();
		} else if (document.documentElement.webkitRequestFullscreen) {
			document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
		}
	} else {
		if (document.cancelFullScreen) {
			document.cancelFullScreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		}
	}
}

html代码:

<input value="全屏" type='button' οnclick='toggleFullScreen();' />

如需上面效果图的合并效果:请点击下面链接:
http://blog.csdn.net/love_xiolan/article/details/52150171

谢谢,喜欢请点赞,不喜勿喷!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/283550