h5页面禁止复制以及禁止右键

小鱼儿 2021-11-05 07:48 594阅读 0赞

问题：禁止文档复制，禁止图片另存为等相关操作  
第一css禁止：复制（参考https://blog.csdn.net/qq\_32007439/article/details/81145580）

body{//可以通过css选择元素
        -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
        -webkit-user-select:none; /*webkit浏览器*/
        -khtml-user-select:none; /*早期浏览器*/
        -moz-user-select:none; /*火狐*/
        -ms-user-select:none;  /*IE10*/
        user-select:none;
    }

第二：禁止右键js，以及原生方法

var $copycontrol = $(".body");
        if ($copycontrol.length > 0 && $copycontrol[0].contentWindow && $copycontrol[0].contentWindow.document && $copycontrol[0].contentWindow.document.body) {
            var ifbody = $copycontrol[0].contentWindow.document.body//这里可以优化，采用遍历放手
            //原生方式
            ifbody.setAttribute("onselectstart", "return false");
            ifbody.setAttribute("unselectable", "on");
            ifbody.style.cssText = "display: block;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-o-user-select:none;-khtml-user-select: none;user-select: none;";
    		
    		兼容ios（css，js失效可以尝试）
    		document.documentElement.style.webkitTouchCallout='none';//禁止长按
    		document.documentElement.style.webkitUserSelect='none';//禁止选择
    
            //jquer方法
            jQuery(ifbody).attr({
                leftmargin: 0,
                topmargin: 0,
                oncontextmenu: 'return false',
                ondragstart: 'return false',
                onselectstart: "return false",
                onselect: "retuen false",
                onbeforecopy: 'return false',
            }); 
        }

第三：涉及到ifram，禁用右键

parent.getParentWindow(window).document.oncontextmenu=new Function("event.returnValue=false");
     parent.getParentWindow(window).document.onselectstart=new Function("event.returnValue=false");

第四：react问题涉及到生命周期，我们可以通过加载css的方式禁止复制，以及渲染中不存在真实dom可以提交加属性在对应节点上。