美文网首页让前端飞
chrome调试键盘事件&使页面不可复制的方法

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

作者: kybetter | 来源:发表于2018-06-22 10:13 被阅读6次

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

    在网上找了一圈:如何在页面中禁用复制。发现是用 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,于是就可以愉快地复制了。

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

    你学到了吗?

    相关文章

      网友评论

        本文标题:chrome调试键盘事件&使页面不可复制的方法

        本文链接:https://www.haomeiwen.com/subject/xyahyftx.html