problem:因屏幕或文本域等太小,想扩大屏幕(全屏)
solve:
//先封装好方法
//进行切换var fullScreenClickCount=0; //调用各个浏览器提供的全屏方法var handleFullScreen = function () { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } else if (de.msRequestFullscreen) { de.msRequestFullscreen(); } else { wtx.info("当前浏览器不支持全屏!"); }};//调用各个浏览器提供的退出全屏方法var exitFullscreen=function() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); }}
//获取.fullscreen样式(选择器)的点击事件,再该事件中调用已封装好的方法
$(".fullscreen").click(function () { if (fullScreenClickCount % 2 == 0) { handleFullScreen(); } else { exitFullscreen(); } fullScreenClickCount++;});
//这里仅用一个样式实现切换全屏退屏,关键点是判断浏览器实现全屏退屏的方法
完整的例子如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>fullscreen test
点击之前
点击之后