首页 > Web开发 > 详细

网页防止内容复制奇遇记

时间:2016-01-15 19:59:05      阅读:247      评论:0      收藏:0      [点我收藏+]

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

一、什么情况

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

      

二、神马问题

  技术分享

  注意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 就好了。如下:

  技术分享

 

  同事又抱怨了,这不还是要打开调试器吗?我最终在几天后做了一个chrome 插件处理这个问题,至于chrome插件怎么写,网上应该有好多这类的文章。实现两行脚本注入,应该还是比较简单的。

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

网页防止内容复制奇遇记

原文:http://www.cnblogs.com/webARM/p/5133889.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!