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

最新推荐文章于 2024-07-20 22:26:17 发布

cc百川

最新推荐文章于 2024-07-20 22:26:17 发布

阅读量2.5k

点赞数

分类专栏： web前端文章标签：禁用右键禁止复制 react禁止复制 IOS禁止长按 css禁止复制

本文链接：https://blog.csdn.net/ljcc122/article/details/98883206

版权

本文介绍了如何禁止H5页面的内容被复制和右键操作，包括使用CSS防止复制，JavaScript阻止右键菜单，处理iframe中的右键禁用，以及在React应用中通过生命周期方法和CSS来实现复制禁止。

摘要由CSDN通过智能技术生成

问题：禁止文档复制，禁止图片另存为等相关操作
第一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;-m