网页禁止复制的实现方法

我们经常在某些网站上复制内容的时候发现,竟然复制不了。友好的交互还会弹窗告诉你,登陆后才能复制哦。那么网站是如何阻止用户复制的呢?

1.JavaScript脚本的方式

通过JavaScript脚本限制复制功能是最常用的方法,具体的实现方式有以下几种:

// 禁用右键菜单、复制、选择
$(document).bind("contextmenu copy selectstart", function() {
  return false;
});
// 禁用Ctrl+C和Ctrl+V(所有浏览器均支持)
$(document).keydown(function(e) {
  if(e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67)) {
    return false;
  }
});

2.CSS的方式

使用CSS能够保证在用户禁用JavaScript脚本的情况下,复制功能也会被禁止。实现方式如下:

body {
  -moz-user-select:none; /* Firefox私有属性 */
  -webkit-user-select:none; /* WebKit内核私有属性 */
  -ms-user-select:none; /* IE私有属性(IE10及以后) */
  -khtml-user-select:none; /* KHTML内核私有属性 */
  -o-user-select:none; /* Opera私有属性 */
  user-select:none; /* CSS3属性 */
}

3.HTML属性的方式

HTML的标签提供了一些属性来禁用或开启复制功能。禁止复制和剪切:

oncopy="return false;"

oncut="return false;"
实现方式如下:

<body oncopy="return false" oncut="return false;" onselectstart="return false" >    

关于页面禁止复制的功能实现就介绍到这里了,欢迎你关注我的专栏。

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 78,880评论 25 511
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 75,999评论 12 117
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 212评论 0 3
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    袁俊亮技术博客阅读 3,359评论 0 73
  • LRU(Least Recently Used)即最近最少使用算法,在操作系统内存管理中,有一类很重要的算法就是内...
    狗尾巴草败了阅读 74评论 0 0