解决网页无法复制文字的问题-（非插件、非禁用javascript）

最新推荐文章于 2024-03-28 11:32:24 发布

xiaomaomixj

最新推荐文章于 2024-03-28 11:32:24 发布

阅读量330

点赞数

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/xiaomaomixj/article/details/134715066

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目的：

想必我们都遇到过在网页上复制自己想要的内容，并不容易，有的需要关注公众号、或者需要登录注册一个账号、有的甚至还要付钱才让复制，今天就来解决这种问题。

无法复制原因：

要解决网页文字不能复制的问题，先要了解，到底是怎么限制了我们进行复制

首先，我们可以把复制、剪切看作事件，由js控制，而事件如果阻止了默认事件的发生，那么就会令这个事件失去了原来的效果，大致代码如下：

//复制
document.addEventListener('copy', (event) => {
    //event.clipboardData.setData("text/plain", "往剪切板写入其他内容");
    //阻止默认事件
    event.preventDefault();
    //....(这里就可以写其他逻辑，例如：弹窗登录、弹窗付钱、弹窗关注公众号等等)
});

//剪切
document.addEventListener('cut', (event) => {
    //event.clipboardData.setData("text/plain", "往剪切板写入其他内容");
    //阻止默认事件
    event.preventDefault();
    //....(这里就可以写其他逻辑，例如：弹窗登录、弹窗付钱、弹窗关注公众号等等)
});

加了上面这两个事件监听后，就会监听复制和剪切并阻止其原本的功能（可以监听但不限于：ctrl+c，ducument.execCommand，鼠标右击（复制、剪切））

解决复制：

最终通过文档认识到了一个专门操作剪切板的api（Clipboard API），咱不需要细讲这个东西，他有一些方法（就是读写剪切板的方法），咱们可以用其中一个方法解决不能复制的问题（writeText）

navigator.clipboard.writeText("写入到剪切板的内容");

方法的限制：

1.需要保证你要复制的网站必须是https

2.需要和网页有交互

3.如果有权限访问，需要选择允许

因为，这个方法只是往剪切板里面写入内容，并非复制功能，所以不会被上面的事件进行监听

如果我们能够再获取到选中的文本，把选中的文本通过这个方法写入剪切板那么就相当于完成了复制

无法选中文本的原因：

随即问题出现，有些网站他不仅仅限制了对文字的复制，还限制了对文字的选择

分析后发现大部分是利用css样式进行了禁止文字选择，css样式如下：

p{
    user-select: none;
}

解决选中文本：

这个就简单了，我们只需要把样式覆盖就好，给标签加上行级样式即可：

<p style="user-select: text;">阻止用户选中文本（无法选中）</p>

获取选中的文本：

window.getSelection().toString();

最后总结-以及方法：

最后就非常简单了，我们只需要把前面说的东西整合一下，就可以做到在网页上任意复制了，整合解决代码如下：

(function () {
    function setAllSelect(el = document.body) {
        for (let index = 0; index < el.children.length; index++) {
            const e = el.children.item(index);
            e.style.userSelect = 'text';
            setAllSelect(e);
        }
    }
    setAllSelect();
    document.documentElement.addEventListener('mouseup', e => {
        const pasteText = window.getSelection().toString();
        if (null === pasteText || undefined === pasteText || '' === pasteText.trim()) {
            return;
        }
        navigator.clipboard.writeText(pasteText).then(() => {
            alert("复制成功！");
        }).catch(() => {
            alert("复制失败！");
        });
    });
})();

现在只需要复制上面的代码，粘贴到浏览器的控制台

控制台所在位置，快捷键：（f12或者fn+f12）：