不想网页被人通过浏览器审查元素或控制台调试网页代码,可以通过比较屏幕window.outerWidth和页面可见区域window.innerWidth的差距判断浏览器是否打开了Web开发者工具,如果检测到Web开发者工具被打就清空网页代码。
实现代码:
;(function () {
'use strict';
var devtools = {
open: false,
orientation: null
}
var threshold = 160;//outerWidth与innerWidth的差距阀值
var emitEvent = function (state, orientation) {
window.dispatchEvent(new CustomEvent('devtoolschange', {
detail: {
open: state,
orientation: orientation
}
}))
}
setInterval(function () {
var widthThreshold = window.outerWidth - window.innerWidth > threshold;
var heightThreshold = window.outerHeight - window.innerHeight > threshold;
var orientation = widthThreshold ? 'vertical' : 'horizontal';
if (!(heightThreshold && widthThreshold) &&
((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) {
if (!devtools.open || devtools.orientation !== orientation) {
emitEvent(true, orientation);
}
devtools.open = true;
devtools.orientation = orientation;
} else {
if (devtools.open) {
emitEvent(false, null);
}
devtools.open = false;
devtools.orientation = null;
}
}, 500)
if (typeof module !== 'undefined' && module.exports) {
module.exports = devtools;
} else {
window.devtools = devtools;
}
})();
window.addEventListener('devtoolschange', function (e) {
if (e.detail.open){
document.getElementsByTagName('body')[0].innerHTML = '';
}
});