禁止复制页面内容的多种方法

最新推荐文章于 2023-10-12 10:25:44 发布

dae bal

最新推荐文章于 2023-10-12 10:25:44 发布

阅读量449

点赞数 1

分类专栏：前端学习文章标签：其他 jquery html

本文链接：https://blog.csdn.net/baidu_39043816/article/details/103460121

版权

前端同时被 2 个专栏收录

164 篇文章 2 订阅

订阅专栏

学习

39 篇文章 0 订阅

订阅专栏

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;

}

HTML页面写法：

取消选取、防止复制

<body onselectstart="return false">

防止页面被复制，参考：怎么做网络推广 - 秀创科技（可以看一下源代码里面的页面加载，还有用的jquery的图片懒加载的插件，搜索的功能，点击新闻标题图片弹出来大的图片能滑动都可以看一下）

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy="document.selection.empty()" onselect="document.selection.empty()">

js方法：

<script type="text/javascript">
    //禁止鼠标右键
    document.oncontextmenu = function(){
        return false;
    }
    //禁止元素被选中
    if (typeof(document.onselectstart) != 'undefined') {       
        // IE chrome下禁止元素被选中       
        document.onselectstart = function(){
            return false;
        }
    } else {
            // firefox下禁止元素被选中的变通办法       
            document.write('<style type="text/css">body { -moz-user-select: none; }</style>');     
    }
</script>

<script type="text/javascript">
    document.oncontextmenu = function(){return false;}
    if (typeof(document.onselectstart) != 'undefined') {document.onselectstart = function(){return false;}
    } else {document.write('<style type="text/css">body { -moz-user-select: none; }</style>');}
</script>

dae bal

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
禁止复制页面内容的多种方法

*{-webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-user-select:none;/*webkit浏览器*/ -khtml-user-select:none;/*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none;/*IE10*/...
复制链接

扫一扫