因为原生，选择一家公司(前端如何防笔试作弊)
haoteby 2025-09-18 19:13 2 浏览
也是前几天的笔试题，让我了解和巩固了一些原生js的api。感谢贵公司收留我，自己也会努力提升自己的技术。
如何通过浏览器api调用摄像头，录音设备？
navigator可以获取当前浏览器的信息。
navigator.mediaDevices 该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。
navigator.mediaDevices.getUserMedia 会提示用户给予使用媒体输入的许可。可以传入参数指定了请求的媒体类型和相对应的参数。 他会返回一个Promise对象，成功的回调会返回一个流媒体对象mediaStream。
在低版本浏览器中，我们可以使用URL.createObjectURL(mediaStream)来进行视频预览。但是在高版本浏览器中这种方式被禁止了，我们需要使用vedioDom.srcObject = mediaStream进行预览。
// 想要获取一个最接近 400x400 的相机分辨率
const constraints = { audio: true, video: { width: 400, height: 400 } };
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (mediaStream) {
console.log("me", mediaStream)
var video = document.querySelector("video");
console.log("%O", video)
// 旧的浏览器可能没有 srcObject
if ("srcObject" in video) {
video.srcObject = mediaStream;
} else {
// 防止在新的浏览器里使用它，应为它已经不再支持了 这种写法在新浏览器中不支持了。
video.src = window.URL.createObjectURL(mediaStream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
}); // 总是在最后检查错误监听用户切换页面
beforeunload事件只有在用户有了交互行为后，例如填写表单，然后刷新页面，他才会弹出会话框提示用户。
window.addEventListener('beforeunload', function (event) {
event.preventDefault()
// 添加一些确认用户是否离开的逻辑
const confirmationMessage = '您有未保存的内容，确定离开吗？';
event.returnValue = confirmationMessage; // 兼容旧版本浏览器
});当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。
visibilitychange当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。但是经过测试发现，只要当前页面可见就表示document.visibilityState不为hidden，而不是失去焦点的时候就会判为hidden例如打开微信层叠在浏览器上方就不会被认为是hidden。
// 阻止当前用户离开该页面
let count = 5
document.addEventListener('visibilitychange', function () {
// 用户离开了当前页面
if (document.visibilityState === 'hidden') {
count--
document.title = '页面不可见';
alert(`请勿离开此页面，${count}次后判为作弊！`)
}
// 用户打开或回到页面
if (document.visibilityState === 'visible') {
document.title = '页面可见';
}
});如何监听用户将焦点聚焦到其他app上时，触发提醒，还请各位大佬指点。
想到了一种间接方式，就是在答题时默认让其全屏，只要退出全屏就算一次失去焦点。 requestFullscreen 用于发出异步请求使元素进入全屏模式。
- document.fullscreenEnabled是否可以开启全屏。
- fullscreenchange,当元素全屏状态变化时触发。可以通过document.fullscreenElement属性去判断是否处于全屏状态，为非空（null），即处于全屏模式中。此事件不能被取消。
// 只有用户触发事件时，才可以使用全屏api
const fullscreenButton = document.getElementById("fullscreenButton")
function activeFullScreen() {
const element = document.documentElement; // 获取整个页面元素
if (element.requestFullscreen) {
element.requestFullscreen().catch(err => {
console.log("err", err)
});
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
}
}
fullscreenButton.addEventListener('click', function() {
if (document.fullscreenEnabled) {
if (document.fullscreenElement === null) {
// 如果当前没有全屏元素，进入全屏
activeFullScreen()
}
// else {
// // 如果当前已经全屏，退出全屏
// if (document.exitFullscreen) {
// document.exitFullscreen();
// } else if (document.mozCancelFullScreen) { /* Firefox */
// document.mozCancelFullScreen();
// } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
// document.webkitExitFullscreen();
// } else if (document.msExitFullscreen) { /* IE/Edge */
// document.msExitFullscreen();
// }
// }
} else {
alert('浏览器不支持全屏API');
}
});阻止文本复制
全局阻止文本复制的方式有两种
- 在html中添加user-select: none;css属性。
- 全局监听selectstart事件，并阻止其默认行为。
// 开启禁用复制
/**
* 1. 全局监听selectstart事件，并阻止默认行为
* 2. 在html标签中加上 user-select: none; css属性。
* */
window.addEventListener("selectstart", (e) => {
e.preventDefault()
})
<html lang="en" style="user-select: none;">禁用右键审查元素
我们可以通过contextmenu事件去监听用户打开上下文菜单，即鼠标右键。以前写过一篇文章介绍过如何自定义上下文菜单，请看这里。
// 禁用鼠标右键
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
})作者：Spirited_Away
链接：
https://juejin.cn/post/7301908233291300900
相关推荐
- 如何随时清理浏览器缓存_清理浏览器缓存怎么弄
-
想随时清理浏览器缓存吗？Cookieformac版是Macos上一款浏览器缓存清理工具，所有的浏览器Cookie，本地存储数据，HTML5数据库，FlashCookie，Silverlight，...
- Luminati代理动态IP教程指南配置代理VMLogin中文版反指纹浏览器
-
介绍如何使用在VMLogin中文版设置Luminati代理。首先下载VMLogin中文版反指纹浏览器（https://cn.vmlogin.com）对于刚接触Luminati动态ip的朋友，是不是不懂...
- mac清除工具分享，解除您在安全方面的后顾之忧
-
想要永久的安全的处理掉重要数据，删除是之一，使用今天小编分享的mac清除工具，为您的操作再增一层“保护”，小伙伴慎用哟，一旦使用就不可以恢复咯，来吧一起看看吧~mac清除工具分享，解除您在安全方面的后...
- 取代cookie的网站追踪技术:”帆布指纹识别”
-
【前言】一般情况下，网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体，这样可以通过收集这些个体的数据，通过分析后更加精准的去推送广告（精准化营销）或其他有针对性的一些活动。Co...
- 辅助上网为啥会被抛弃 曲奇(Cookie)虽甜但有毒
-
近期有个小新闻，大概很多小伙伴都没有注意到，那就是谷歌Chrome浏览器要弃用Cookie了！说到Cookie功能，很多小伙伴大概觉得不怎么熟悉，有可能还不如前一段时间被弃用的Flash“出名”，但它...
- 浏览器指纹是什么?浏览器指纹包括哪些信息
-
本文关键词：浏览器指纹、指纹浏览器、浏览器指纹信息、指纹浏览器原理什么是浏览器指纹？浏览器指纹是指浏览器的各种信息，当我们访问其他网站时，即使是在匿名的模式下，这些信息也可以帮助网站识别我们的身份。...
- 那些通用清除软件不曾注意的秘密_清理不常用的应用软件
-
系统清理就像卫生检查前的大扫除，即使你使出吃奶的劲儿把一切可能的地方都打扫过，还会留下边边角角的遗漏。随着大家电脑安全意识的提高，越来越多的朋友开始关注自己的电脑安全，也知道安装360系列软件来"武装...
- 「网络安全宣传周」这些安全上网小知识你要知道!
-
小布说：互联网改变了人们的衣食住行，但与之伴生的网络安全威胁也不容忽视。近些年来，风靡全球的勒索病毒、时有发生的电信诈骗、防不胜防的个人信息泄露时时刻刻都威胁着我们的生活。9月18日-24日是第四届...
- TypeScript 终极初学者指南_typescript 进阶
-
在过去的几年里TypeScript变得越来越流行，现在许多工作都要求开发人员了解TypeScript...
- jQuery知识一览_jquery的认识和使用
-
一、概览jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。...
- 我的第一个Electron应用_electronmy
-
hello，好久不见，最近笔者花了几天时间入门Electron，然后做了一个非常简单的应用，本文就来给各位分享一下过程，Electron大佬请随意~笔者开源了一个Web思维导图，虽然借助showSav...
- HTML5 之拖放(Drag 和 Drop)_html拖放api
-
简介拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。先点击一个小例子：在用户开始拖动<p>元素时执行JavaScrip...
- 如何用JavaScript判断输入值是数字还是字母?
-
在日常开发中，我们有时候需要判断用户输入的是数字还是字母。本文将介绍如何用JavaScript实现这一功能。检查输入值是否是数字或字母...
- 图形编辑器开发:快捷键的管理_图形编辑工具
-
大家好，我是前端西瓜哥。...
- 浏览器原生剪贴板:原来它能这样读取用户截图!
-
当我们使用GitHub时，会发现Ctrl+V就能直接读取用户剪贴板图片进行粘贴，那么它是如何工作的？安全性如何？...