继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

chrome调试键盘事件&使页面不可复制的方法

Qyouu
关注TA
已关注
手记 489
粉丝 88
获赞 414

遇到一个网站,想要对其内容进行复制,发现复制不了。

在网上找了一圈:如何在页面中禁用复制。发现是用 js 来对按键进行监听,如果发现用户按下了Ctrl + c则阻止掉该事件,于是用户就不能复制了。

后来发现一个更简单的方法,就是在你不希望用户复制的地方,比如说某个 div 标签上,加入oncopy="return false"oncut="return false"这两个属性,在该 div 中的内容就不能被复制了。

我之前是不知道这两个属性可以阻止用户复制的,那我是怎么找到的呢?

因为这个网站里面的 js 是经过压缩的,我也不方便找到对应的代码来打断点调试,也不知道怎么调试键盘事件,后来还是在 Chrome devolopers 这个网站上找到了灵感:https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=zh-cn

打开 Chrome 控制台,进入 Sources 选项,面板上有 Event Listener Breakpoints 这个选项卡,里面是一些事件监听的选项。

在我这个需求里,我只需要找到复制这个操作,于是我找到了 Clipboard 这个选项下面的 copy ,给它打上勾。

回到页面上按Ctrl + c,它就打断点标记到触发该事件的地方,我发现在这个 div 里面,有oncopy="return false"oncut="return false"这两个属性,我改成return true,于是就可以愉快地复制了。

同时也学到了一个如何阻止用户复制页面内容的简单的方法。

你学到了吗?



作者:kybetter
链接:https://www.jianshu.com/p/3c6c91d0b490


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP