js可以混排php,js全屏可以这样实现，附完整源码…. - Phpvar's Blog - phpvar.com

全屏阅读是个不错的阅读体验，它可以让你的视觉焦点聚集在你想关注的内容上。

一般我们按下 F11键就能让浏览器全屏显示，但这还不够好，比如：在阅读本站文章的时候，你只想让文章内容区域全屏显示，其它无关的东西像:顶部导航栏，右边的侧边栏等统统不显示。

要能实现这样的阅读体验，感觉会很不错。

没错，本文就是介绍如何实现这一用户体验需求的！

当然，在继续阅读本文之前可先在本文章页面通过以下操作来体验下这种阅读新体验：

进入全屏阅读：按键盘上的ENTER键 或 点击文章右上角带红字的”全屏阅读“按钮

退出全屏阅读：按键盘上的ENTER键 或按ESC键 或 点击文章右上角带红字的”退出全屏“按钮

贴出实现全屏切换的完整源码，如下：

* { margin: 0; padding: 0; }

.demoWrap { width: 980px; margin: 0 auto;text-align: center;}

.demoHead,

.demoFooter,

.demoCnt .sb,

.demoCnt .cnt{background-color: #efefef;}

.demoHead,.demoFooter{display: block;height: 100px;line-height: 100px;text-align: center;}

.demoCnt{overflow: hidden;margin: 20px 0;}

.demoCnt .sb {width: 300px;min-height: 300px;line-height: 300px; float: right;margin-left: 20px;}

.demoCnt .cnt {overflow: hidden;min-height: 300px;padding: 20px;-webkit-box-sizing: border-box;

box-sizing: border-box;}

:-webkit-full-screen {}

.fullScreenElement { width: 100%; height: 100%; overflow: auto; background-color: #f00; }

.exitFullScreen { border: 1px solid #f00; }

页头

侧边栏

全屏阅读

全屏显示区域！！！

页脚

var $content = $(".cnt");

var content = $content[0];

var fullScreenLink = $('.fullScreenLink');

function toggleFullScreen() {

(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) ? (document.exitFullscreen ? document.exitFullscreen() : document.msExitFullscreen ? document.msExitFullscreen() :

document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitExitFullscreen && document.webkitExitFullscreen()) : (content.requestFullscreen ? content.requestFullscreen() : content.msRequestFullscreen ? content.msRequestFullscreen() :

content.mozRequestFullScreen ? content.mozRequestFullScreen() : content.webkitRequestFullscreen && content.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))

}

$(document).on('click', '.fullScreenLink', function(event) {

event.preventDefault();

toggleFullScreen();

});

$(document).on('webkitfullscreenchange mozfullscreenchange msfullscreenchange fullscreenchange', function() {

// fullScreen，非标准,弃用

// var isFullScreen=document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullScreen;

fullScreenLink.toggleClass('exitFullScreen');

$content.toggleClass('fullScreenElement');

// isFullScreen ? fullScreenLink.text("退出全屏") : fullScreenLink.text("全屏");

fullScreenLink.hasClass('exitFullScreen') ? fullScreenLink.text("退出全屏") : fullScreenLink.text("全屏阅读");

})

$(document).on("keydown", function(e) {

if (e.keyCode == 13) {

toggleFullScreen();

}

});

提示：你可以先修改部分代码再运行。

上述代码实现全屏阅读，需要注意的几点：

全屏窗口不可滚动查看内容，全屏元素需加width: 100%;height: 100%;overflow: auto; 控制 ，以达到各浏览器显示效果一致(注：Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕： "width: 100%; height: 100%"。 WebKit 则不会这么做；它会让全屏的元素以原始尺寸居中到屏幕中央，其余部分变为黑色。)

进入全屏标准写法requestFullscreen中的screen单词首字母是小写s，chrome/ms 只需加上各自的浏览器前缀即可，但firefox除了加前缀screen单词首个字母必须大写：mozRequestFullScreen()

全屏状态，js不能捕获到esc的 keyCode(esc键默认退出全屏)

退出全屏标准写法exitFullscreen,其它浏览器加前缀即可，但firefox使用带前缀的mozCancelFullScreen()方法来实现

F11键默认不响应fullscreenchange()方法，必需先调用requestFullscreen(),再按F11键，该键才会触发fullscreenchange()方法，也就是说用户按F11进入全屏模式，也必须再次按F11才能退出该全屏模式！

ie11不支持fullscreenchange(),edge版本才支持，而且进入全屏也无任何提示，这体验感觉不能再差啦，鄙视！