摘要：由于代码块里面的代码比较多，如果在未登录时也能实现一键复制，那岂不是很酷！？

友情提示：文章思路仅供交流，建议看官还是登录后再复制吧，毕竟人家也是要面子的~

在上一篇文章《浅聊某sdn是如何实现未登录时屏蔽复制的》中，我们已经实现了不登录也能复制某sdn上的文章内容。但对于复制代码块来说，还是很不方便的。毕竟很多代码块区域动辄几十到上百行，按住鼠标左键或触摸板来复制确实有些鸡肋。

那怎么办呢？

掏出神器F12，破它！

一、分析“登录后复制”按钮是如何工作的

先上一张图，我们在未登录时，鼠标移入代码块时，在右上角会显示一个“登录后复制”的按钮。点击按钮，就会弹出登录框。配图：弹出登录框.png↓↓↓

细心的看官会发现“登录后复制”对应的是一个类名为.hljs-button的div，而这个dom元素上并未绑定点击事件。配图：登录后复制按钮上未绑定事件.png↓↓↓

这里补充一句，当我在测试此插件的时候，发现有的文章里面的代码块会跟本案例有些出入。但看官不用担心，因为逻辑是相通的，稍做修改即可破解复制权限的。如果实在搞不定，可以使用文末的插件哈。

那他是怎么实现一点击就出现登录框的呢？

1.1、事件委托

实际上此处用的是事件委托来实现，昨天的那个copy也是一样的哈。即：把子元素的事件绑定到父元素上。

核心代码就是onclick点击事件。

onclick="mdcp.signin(event)"

1.2、登录后的变化

如果登录过后，此处就会变成“复制”两个字。

此时onclick事件会发生变化。

onclick="mdcp.copyCode(event)"

所以说，我们只需要在未登录时让点击事件变成copyCode即可。

那怎么做呢？

二、偷天换日

思路如下：

1. 找到页面上的代码块
2. 清除点击事件
3. 绑定新的click事件并调用复制方法

有了思路后，我们就开始动手去实践吧！

对于第1条，我们可以使用原生javascript中的document.querySelector方法来获取节点

对于第2条，我们可以使用onclick = null来达到清除的目的。

对于第3条，我们可以使用addEventListener来重新绑定click点击事件。

相关代码如下↓↓↓

/* 改写click事件，实现不登录也可复制 ↓↓↓  */
const prismDom = document.querySelector(".prism"); // 获取第一个.prism
if (prismDom) {
  prismDom.onclick = null; // 清除点击事件
  // 再绑定新的click点击事件
  prismDom.addEventListener("click", function(event) {
    return mdcp.copyCode(event) // 调用原页面中自带的复制方法
  });
}

2.1、验证

步骤如下：

1. 打开某sdn的任意一篇含有代码块的文章
2. 点击“登录后复制”按钮
3. 此时会显示登录框
4. 粘贴上方代码到控制台并回车
5. 再点击“登录后复制”按钮
6. 此时不会弹出登录框。在控制台中按下Ctrl+V，你会惊奇的发现粘贴是代码块哦！

视频演示↓↓↓ （友情提醒：点击上方图片即可播放视频）

2.2、优化

如果页面上有多个代码块的话，上面的代码是会存在问题的，此时就需要进行优化了。

我们可以使用document.querySelectorAll来获取所有的代码块，然后通过for循环进行绑定点击事件，来达到每个代码块均可复制的效果。相关代码如下 ↓↓↓

/* 改写click事件，实现不登录也可复制 ↓↓↓  */
const prismDom = document.querySelectorAll(".prism"); // 获取所有的.prism
if (prismDom) {
  for (let i = 0; i < prismDom.length; i++) {
    prismDom[i].querySelector('.signin')?.setAttribute("data-title", "开始复制吧"); // 用更直白的话术来提醒用户此处是可以复制的
    prismDom[i].onclick = null; // 清除点击事件
    // 再绑定新的click点击事件
    prismDom[i].addEventListener("click", function(event) {
      return mdcp.copyCode(event) // 调用原页面中自带的复制方法
    });
  }
}

现在，刷新页面后将上述代码粘贴到控制台并回车，然后就可以随意一键复制文章中的代码块了哦！

三、资源下载

下面提供3种下载方式，看官可自行选择。

1. 本站下载：[插件]移除某sdn复制限制v0.2.zip 免费
2. 百度云：链接: https://pan.baidu.com/s/1qFI3qSUYoM3YWR6GYDdfiA?pwd=8jju 提取码: 8jju
3. github下载：https://github.com/yilingsj/no-login-csdn-can-copy.git

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2023-06-24/copy-csdn-code.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。