【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 样式。

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

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