javascript防止浏览器打开Web开发者工具查看或调试代码

不想网页被人通过浏览器审查元素或控制台调试网页代码,可以通过比较屏幕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 = '';
    }
});
关键词: javascript代码