【HTML】-解决页面内容无法选择、复制问题

目录

1、网页内容无法选中

1.1、问题原因

1.2、解决脚本

1.2.1、开启控制台窗口

1.2.2、执行脚本命令

2、内容复制弹出阻止框

2.2、解决脚本


1、网页内容无法选中

1.1、问题原因

今天在访问某一网站平台,需要将内容进行选择、复制时发现不可使用。

在使用【Simple Allow Copy】 插件,仍无法启用(插件自身在其他平台可以使用)

经过发现是由于页面的CSS样式中存在以下两种属性导致,移除即可。

webkit-user-select: none;

user-select: none;

1.2、解决脚本

1.2.1、开启控制台窗口

按下【F12】 或【Fn + F12】开启控制台窗口,或者在更多工具中找到【开发者工具】

选择Console 页签

1.2.2、执行脚本命令

将以下脚本命令复制到控制台窗口,按下【Enter键】即可

复制代码
 // 遍历所有样式表
    for (var i = 0; i < document.styleSheets.length; i++) {
        var styleSheet = document.styleSheets[i];

        // 尝试访问样式表的规则(处理跨域问题)
        try {
            var rules = styleSheet.cssRules || styleSheet.rules;

            // 遍历样式表中的每条规则
            for (var j = rules.length - 1; j >= 0; j--) {
                var rule = rules[j];

                // 检查规则是否包含 user-select: none 或 -webkit-user-select: none
                if (rule.style && (rule.style.userSelect === 'none' || rule.style.webkitUserSelect === 'none')) {
                    // 移除规则
                    styleSheet.deleteRule(j);
                }
            }
        } catch (e) {
            console.log(`Cannot access stylesheet: ${styleSheet.href}, due to ${e}`);
        }
    }

代码解释

  1. 遍历所有的样式表 document.styleSheets
  2. 尝试访问每个样式表中的规则(如果样式表来自跨域资源,可能会遇到访问限制)。
  3. 遍历每个样式表中的每条规则。
  4. 检查规则是否包含 user-select: none-webkit-user-select: none 样式。
  5. 如果找到匹配的规则,则从样式表中移除该规则。

将此代码放入你的HTML文件中的 <script> 标签内,确保它在页面加载完成后执行。这样就可以全局查找并移除 CSS 样式中的指定规则。

2、内容复制弹出阻止框

将内容复制后,自动弹出选项框,并进一步要求开通会员等。

2.2、解决脚本

脚本的操作与【1.2】中一致,开启控制台窗口,输入脚本,按键盘Enter键执行即可。

可以在【某度文库】中试试

复制代码
// 移除所有阻止内容复制和选中的事件监听器
    var eventsToRemove = ['selectstart', 'copy', 'contextmenu', 'mousedown', 'mouseup', 'dragstart'];

    // 为元素移除事件监听器
    function removeEventListeners(element) {
        eventsToRemove.forEach(function(event) {
            element.addEventListener(event, function(e) {
                e.stopPropagation();
            }, true);
        });
    }

    // 获取页面上的所有元素
    var allElements = document.querySelectorAll('*');
    allElements.forEach(function(element) {
        removeEventListeners(element);
    });

    // 移除 user-select 和 -webkit-user-select 样式
    for (var i = 0; i < document.styleSheets.length; i++) {
        var styleSheet = document.styleSheets[i];

        // 尝试访问样式表的规则(处理跨域问题)
        try {
            var rules = styleSheet.cssRules || styleSheet.rules;

            // 遍历样式表中的每条规则
            for (var j = rules.length - 1; j >= 0; j--) {
                var rule = rules[j];

                // 检查规则是否包含 user-select: none 或 -webkit-user-select: none
                if (rule.style && (rule.style.userSelect === 'none' || rule.style.webkitUserSelect === 'none')) {
                    // 移除规则
                    styleSheet.deleteRule(j);
                }
            }
        } catch (e) {
            console.log(`Cannot access stylesheet: ${styleSheet.href}, due to ${e}`);
        }
    }

    // 移除所有内联的 user-select 样式
    allElements.forEach(function(element) {
        if (element.style.userSelect === 'none') {
            element.style.userSelect = '';
        }
        if (element.style.webkitUserSelect === 'none') {
            element.style.webkitUserSelect = '';
        }
    });

代码解释

  1. 移除事件监听器:

    • 定义 removeEventListeners 函数,使用 addEventListener 给元素添加新的事件监听器,并使用 stopPropagation 阻止事件冒泡,以便移除事件监听器的效果。
    • 遍历页面上的所有元素,调用 removeEventListeners 函数。
  2. 处理样式表:

    • 遍历所有的样式表 document.styleSheets
    • 尝试访问每个样式表中的规则(处理跨域问题)。
    • 检查每条规则是否包含 user-select: none-webkit-user-select: none 样式,并移除匹配的规则。
  3. 移除内联样式:

    • 获取页面上的所有元素,并遍历它们。
    • 移除元素上设置的内联 user-select: none-webkit-user-select: none 样式。

通过这种方式,可以确保页面上的内容可以被正常选中和复制,并恢复默认行为。

注:以上代码提供的内容仅用于个人学习、研究或欣赏。但是不保证内容的全部正确性。通过使用本站内容随之而来的风险与本站无关。

相关推荐
hashiqimiya8 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu11 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
BUG创建者19 小时前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull21 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰21 小时前
html中css的四种定位方式
前端·css·html
IT利刃出鞘1 天前
HTML--最简的二级菜单页面
前端·html
yume_sibai1 天前
HTML HTML基础(4)
前端·html
面向星辰1 天前
html音视频和超链接标签,颜色标签
前端·html·音视频
信看1 天前
实用 html 小工具
前端·css·html
magnet1 天前
用img标签渲染的svg VS 直接使用svg标签,有什么区别?
前端·html