【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: noneif (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}`);}}
代码解释
- 遍历所有的样式表
document.styleSheets。 - 尝试访问每个样式表中的规则(如果样式表来自跨域资源,可能会遇到访问限制)。
- 遍历每个样式表中的每条规则。
- 检查规则是否包含
user-select: none或-webkit-user-select: none样式。 - 如果找到匹配的规则,则从样式表中移除该规则。
将此代码放入你的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: noneif (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 = '';}});
代码解释
-
移除事件监听器:
- 定义
removeEventListeners函数,使用addEventListener给元素添加新的事件监听器,并使用stopPropagation阻止事件冒泡,以便移除事件监听器的效果。 - 遍历页面上的所有元素,调用
removeEventListeners函数。
- 定义
-
处理样式表:
- 遍历所有的样式表
document.styleSheets。 - 尝试访问每个样式表中的规则(处理跨域问题)。
- 检查每条规则是否包含
user-select: none或-webkit-user-select: none样式,并移除匹配的规则。
- 遍历所有的样式表
-
移除内联样式:
- 获取页面上的所有元素,并遍历它们。
- 移除元素上设置的内联
user-select: none和-webkit-user-select: none样式。
通过这种方式,可以确保页面上的内容可以被正常选中和复制,并恢复默认行为。
注:以上代码提供的内容仅用于个人学习、研究或欣赏。但是不保证内容的全部正确性。通过使用本站内容随之而来的风险与本站无关。
相关文章:
【HTML】-解决页面内容无法选择、复制问题
目录 1、网页内容无法选中 1.1、问题原因 1.2、解决脚本 1.2.1、开启控制台窗口 1.2.2、执行脚本命令 2、内容复制弹出阻止框 2.2、解决脚本 1、网页内容无法选中 1.1、问题原因 今天在访问某一网站平台,需要将内容进行选择、复制时发现不可使用。 在使用…...
C#中委托与事件
一、委托 在面向对象中,我们可以将任何数据类型作为参数传递给方法,能否将一个方法作为参数传递给另一个方法?C#中通过委托可以实现将方法作为参数进行传递。 1.1概念 委托是一种引用类型,它可以用于封装并传递方法作为参数。委…...
通用后台管理(二)——项目搭建
目录 前言 一、安装vue-cli依赖 1、使用yarn下载vue-cli 2、使用npm下载 3、检查一下是否下载成功 二、创建项目 1、创建项目,my-app是项目名称 2、 这里选择vue 2,蓝色表示选中的。 3、启动项目 三、下载项目依赖 四、配置项目 1、修改esli…...
多模态大模型之达摩院通义MPLUG
引言 随着人工智能技术的飞速发展,多模态技术逐渐成为研究的热点。它结合了文本、图像、声音等多种数据类型,为机器理解世界提供了更丰富的视角。本文根据严明老师的达摩院通义MPLUG多模态预训练技术分享,及其在电商等行业的应用实践&#x…...
文章翻译记录
以 PINN 为基础,我们开发了一个框架,用于在不同震源位置和速度模型下进行地震建模。本研究的显著贡献包括: 1. 为了提高网络对不同速度模型的泛化能力,必须将速度变量 vp 作为系统的输入参数。本研究从监督学习中汲取灵感…...
C++ 语法习题(2)
第三讲 循环语句 1.偶数 编写一个程序,输出 1 到 100之间(包括 1 和 100)的全部偶数。 输入格式 无输入。 输出格式 输出全部偶数,每个偶数占一行。 输入样例 No input输出样例 2 4 6 ... 100 参考代码: #include <i…...
使用Gstreamer时遇到WARNING: erroneous pipeline: no element “x264enc“(亲测有效)
WARNING: erroneous pipeline: no element “x264enc” 解决: 我下了gstreamer1.0-plugins-ugly包就解决了 sudo apt install -y gstreamer1.0-plugins-ugly...
SAP 新增移动类型简介
在SAP系统中新增移动类型的过程涉及多个步骤,包括复制现有的移动类型、调整科目设置以及进行必要的测试。以下是新增移动类型的一般步骤和关键点: 复制现有的移动类型: 使用事务代码OMJJ进入移动类型维护界面。 勾选移动类型 这里不填写移动类型,然后直接下…...
SQL性能优化策略
发现问题 通过业务监控发现慢SQL或接口响应延迟。利用性能分析工具定位问题。 定位SQL语句 使用监控工具确定影响性能的SQL语句和表。 SQL查询变慢原因 索引失效:查询未使用索引或索引效率低。多表连接:JOIN操作导致性能下降。查询字段过多…...
代码随想录第四十八天 | 198.打家劫舍, 213.打家劫舍II,337.打家劫舍III
198.打家劫舍 看完想法:这里的偷/不偷,和背包问题中的放/不放感觉是一个道理,所以在dp递推公式中仍旧使用max(dp[i-2] nums[i], dp[i-1]) int rob(vector<int>& nums) {vector<int> dp(nums.size()1,0);if(nums.size()0) …...
C#实用的工具类库
Masuit.Tools Masuit.Tools大都是静态类,加密解密,反射操作,树结构,文件探测,权重随机筛选算法,分布式短id,表达式树,linq扩展,文件压缩,多线程下载…...
首席数据官CDO证书报考指南:方式、流程、适考人群与考试难度
在信息泛滥的今天,数据已转变为企业不可或缺的宝贵资源。 面对海量的信息,如何提炼出价值,为企业带来实质性的收益?首席数据官(CDO)认证的出现正是为了满足这一需求,它不仅是个人专业能力的体现…...
数据库基础复习
数据库简介 关系型数据库:Mysql 、Oracle 、SqlServer.... DB2 达梦 非关系型数据库:Redis 、MongoDB... MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管…...
探索AI大模型(LLM)减少幻觉的三种策略
大型语言模型(LLM)在生成文本方面具有令人瞩目的能力,但在面对陌生概念和查询时,它们有时会输出看似合理却实际错误的信息,这种现象被称为“幻觉”。近期的研究发现,通过策略性微调和情境学习、检索增强等方…...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十三章 Linux连接档
i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...
鸿蒙语言基础类库:【@ohos.uri (URI字符串解析)】
URI字符串解析 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 导入…...
JavaScript---new Map()用法
new Map 创建 Map 对象设置键值对获取值检查键是否存在键值对数量删除键值对清空所有键值对迭代 Map 在JavaScript中,Map 是一个构造函数,用于创建 Map 对象,它可以存储键值对集合。与普通的对象不同,Map 的键可以是任何类型的值&…...
【数据基础】— 基于Go1.19的站点模板爬虫的实现
目录 1. 定义目标站点 2. 使用Go的库 3. 发送HTTP请求 4. 解析HTML并提取数据 5. 存储数据 6. 并发处理 示例代码 基于Go 1.19的站点模板爬虫实现通常涉及几个关键步骤:定义目标站点、解析HTML页面、提取所需数据、存储数据以及可能的并发处理。下面我将详细…...
Angular进阶之九: JS code coverage是如何运作的
环境准备 需要用到的包 node 18.16.0# Javascript 代码编辑"babel/core": "^7.24.7","babel/preset-env": "^7.24.7","babel-loader": "^9.1.3",# 打包时使用的 module, 给代码中注入新的方法# http…...
el-table 鼠标移入更改悬停背景颜色
鼠标悬停时需要更改当前行背景颜色,一开始写的颜色会改变,但是一闪而过就没了 这是因为移入移出的动画效果导致的 .el-table__body {.el-table__row:hover {background-color: pink !important;}} 更改为后面的代码,就可以了 .el-table__…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
