网页防止内容复制奇遇记

最近发生一件挺有意思的事情——同事给我一个网址,说为什么页面中的文字和图片为什么不能选中,看他着急用页面里面的内容写文档加上我的好奇心。就帮忙看了看。

一、什么情况

  拿到页面的第一反应是页面中是不是有什么属性(后来发现不是),不管怎样打开调试工具看看吧。这是我遇到了一个问题,右键无效,看来问题不是我想的那么简单。观察一下页面是全局不能右键,全局不能选中。那问题多半发生在最外层的标签上。打开一看,见下图,真相浮出水面了。

      

二、神马问题

  

  注意body标签中的 oncontextmenu 和 onselectstart 这两个事件函数 都是 event.returnValue=false。猜想这应该是让这两个事件无效的意思。那么这两个事件函数之前是干什么的。查了一下oncontextmenu 是上下文菜单(右键)的事件回调;onselectstart是选中开始的时间回调。这也解释了为什么我的右键不好使,又选不了内容了。

三、怎么解决

  现在的这两个回调函数都被定义成无效了。我们就要让他有效——重写函数。在控制台(console)输入如下代码

1 document.getElementsByTagName('body')[0].oncontextmenu = function(){window.event.returnValue=true;}
2 
3 document.getElementsByTagName('body')[0].onselectstart = function(){window.event.returnValue=true;}

改成true了,回车运行看看。页面的内容可以选中了,右键也好使了。

四、有高级点的方法吗?

  同事说每次都输入代码到控制台,他又不是开发人员,怕搞不定,还要每次找我。我看他的浏览器也是chrome,我提供了这样一个方案。

  在 chrome->F12->sources->snippets中新建一个snippet(右键 -》 new)。保存上面的代码段,需要的时候run一下这个snippet 就好了。如下:

  

  通过这次,我深深感到,自己不知道的东西太多太多了!

原文地址:https://www.cnblogs.com/webARM/p/5133889.html