分享一个关于网页上无法复制内容的处理技巧

  最近有朋友吐槽CSDN连个框选代码、复制功能都要登录才能使用,之前也有听到过类似的吐槽,这对于很多面向百度开发的程序员并不友好,于是想了个办法。

  以CSDN为例,当需要复制CSDN上的内容是,可以先在开发者工具的控制台中输入下面的代码执行一遍,就可以使用框选复制了:  

    document.querySelectorAll('*').forEach(ele=>{
        ele.style.userSelect = 'text'
        ele.addEventListener('copy', e => e.stopPropagation())
    })

  其实像CSDN这样需要一些比如登录、会员等权限才允许复制的场景,多数是在内部文章节点监听了copy事件,既然这样,那我们直接在copy的时候直接阻止冒泡就可以了,如果需要,也可以在捕捉阶段进行阻止冒泡

  此外,你是否遇到过你复制内容,但是复制的内容中还包含作者的一些信息,比如复制的文章地址等,其实上面这段代码也能解决这个问题。

  

posted @ 2023-07-24 19:33  没有星星的夏季  阅读(219)  评论(0编辑  收藏  举报