考试系统，开始考试自动全屏（F11的效果）怎么做

July_ing 2017-05-12 05:41:53

各位菊苣好，前几天参加笔试看到某企考试系统，正常浏览器，点开始考试后会跳转到试题页面并且自动全屏（按F11的效果），还会监测鼠标位置，请问怎么是实现这个效果的呢？

...全文

1054 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-05-14

打赏
举报

引用 4 楼 July_ing 的回复:

[quote=引用 2 楼 jslang 的回复:]


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#butt {
	width: 150px;
	height: 58px;
	font-size: 30px;
	line-height: 58px;
	color: #440000;
	background: #dd8e4f;
	border: 1px solid #ff6600;
	text-align: center;
	cursor: default;
}
#box {
	overflow: hidden;
	width: 0;
	height: 0;
}
#test {
	width: 100%;
	height: 100%;
	border-style: none;
}
</style>
</head>
<body>
<div onclick="fullScreen('test')" id="butt"> 开始考试 </div>
<div id="box">
	<iframe src="https://www.baidu.com/" id="test"></iframe>
</div>
<script type="text/javascript">
function fullScreen(id) {
	var element = document.getElementById(id);
	if (element.requestFullScreen)
		return element.requestFullScreen();
	if (element.webkitRequestFullScreen)
		return element.webkitRequestFullScreen();
	if (element.mozRequestFullScreen)
		return element.mozRequestFullScreen();
	if (element.msRequestFullScreen)
		return element.msRequestFullScreen();
	if (element.oRequestFullScreen)
		return element.oRequestFullScreen();
}
</script>
</body>
</html>

啊不是iframe，是禁止退出fullscreen 我看有人说安全性好像不行[/quote] 没办法不让用户退出全屏的

July_ing 2017-05-13

打赏
举报

引用 2 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#butt {
	width: 150px;
	height: 58px;
	font-size: 30px;
	line-height: 58px;
	color: #440000;
	background: #dd8e4f;
	border: 1px solid #ff6600;
	text-align: center;
	cursor: default;
}
#box {
	overflow: hidden;
	width: 0;
	height: 0;
}
#test {
	width: 100%;
	height: 100%;
	border-style: none;
}
</style>
</head>
<body>
<div onclick="fullScreen('test')" id="butt"> 开始考试 </div>
<div id="box">
	<iframe src="https://www.baidu.com/" id="test"></iframe>
</div>
<script type="text/javascript">
function fullScreen(id) {
	var element = document.getElementById(id);
	if (element.requestFullScreen)
		return element.requestFullScreen();
	if (element.webkitRequestFullScreen)
		return element.webkitRequestFullScreen();
	if (element.mozRequestFullScreen)
		return element.mozRequestFullScreen();
	if (element.msRequestFullScreen)
		return element.msRequestFullScreen();
	if (element.oRequestFullScreen)
		return element.oRequestFullScreen();
}
</script>
</body>
</html>

啊不是iframe，是禁止退出fullscreen 我看有人说安全性好像不行

July_ing 2017-05-13

打赏
举报

引用 2 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#butt {
	width: 150px;
	height: 58px;
	font-size: 30px;
	line-height: 58px;
	color: #440000;
	background: #dd8e4f;
	border: 1px solid #ff6600;
	text-align: center;
	cursor: default;
}
#box {
	overflow: hidden;
	width: 0;
	height: 0;
}
#test {
	width: 100%;
	height: 100%;
	border-style: none;
}
</style>
</head>
<body>
<div onclick="fullScreen('test')" id="butt"> 开始考试 </div>
<div id="box">
	<iframe src="https://www.baidu.com/" id="test"></iframe>
</div>
<script type="text/javascript">
function fullScreen(id) {
	var element = document.getElementById(id);
	if (element.requestFullScreen)
		return element.requestFullScreen();
	if (element.webkitRequestFullScreen)
		return element.webkitRequestFullScreen();
	if (element.mozRequestFullScreen)
		return element.mozRequestFullScreen();
	if (element.msRequestFullScreen)
		return element.msRequestFullScreen();
	if (element.oRequestFullScreen)
		return element.oRequestFullScreen();
}
</script>
</body>
</html>

可是聚聚这样是不是onkeycode f11和esc就不好使了啊？就是禁止退出iframe

天际的海浪 2017-05-12

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#butt {
	width: 150px;
	height: 58px;
	font-size: 30px;
	line-height: 58px;
	color: #440000;
	background: #dd8e4f;
	border: 1px solid #ff6600;
	text-align: center;
	cursor: default;
}
#box {
	overflow: hidden;
	width: 0;
	height: 0;
}
#test {
	width: 100%;
	height: 100%;
	border-style: none;
}
</style>
</head>
<body>
<div onclick="fullScreen('test')" id="butt"> 开始考试 </div>
<div id="box">
	<iframe src="https://www.baidu.com/" id="test"></iframe>
</div>
<script type="text/javascript">
function fullScreen(id) {
	var element = document.getElementById(id);
	if (element.requestFullScreen)
		return element.requestFullScreen();
	if (element.webkitRequestFullScreen)
		return element.webkitRequestFullScreen();
	if (element.mozRequestFullScreen)
		return element.mozRequestFullScreen();
	if (element.msRequestFullScreen)
		return element.msRequestFullScreen();
	if (element.oRequestFullScreen)
		return element.oRequestFullScreen();
}
</script>
</body>
</html>