【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}`);}}

代码解释

  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: 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 = '';}});

代码解释

  1. 移除事件监听器:

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

圆通寄15kg30kg一般多少钱?寄大件物品怎么寄最便宜?

作为一名即将毕业的大学生&#xff0c;搬家成了我和室友们共同的难题。尤其是在寄送大件物品时&#xff0c;如何省钱、如何打包、选择哪家快递公司等问题让我们头疼不已。今天&#xff0c;我就来分享一些寄大件物品的省钱技巧以及打包方法&#xff0c;希望对大家有所帮助。 一…

Ubuntu部署SpringBoot项目

文章目录 Ubuntu部署SpringBoot项目一、JDK1.1 下载1.2 解压JDK配置环境变量1.3 是否安装成功1.4 开机自启1.4.1 修改脚本1.4.2 设置开机自启 二、Redis2.1 下载2.2 解压Redis并安装2.3 开机自启2.3.1 修改脚本2.3.2 设置开机自启 三、Nginx3.1 安装Nginx依赖包3.1.1 prce-deve…

Python酷库之旅-第三方库Pandas(006)

目录 一、用法精讲 10、pandas.DataFrame.to_excel函数 10-1、语法 10-2、参数 10-3、功能 10-4、返回值 10-5、说明 10-6、用法 10-6-1、数据准备 10-6-2、代码示例 10-6-3、结果输出 11、pandas.ExcelFile类 11-1、语法 11-2、参数 11-3、功能 11-4、返回值 …

BUUCTF - Basic

文章目录 1. Linux Labs 【SSH连接漏洞】2. BUU LFI COURSE【文件包含漏洞】3. BUU BRUTE【暴力破解用户名密码】4. BUU SQL COURSE【SQL注入-当前数据库】5. Upload-Labs-Linux 1【文件上传漏洞】7. Buu Upload Course 1【文件上传包含漏洞】8. sqli-labs 1【SQL注入-服务器上…

MySQL常用高级特性

MySQL作为一种广泛使用的关系型数据库管理系统&#xff0c;除了基本的数据库功能外&#xff0c;还提供了许多高级特性来满足不同应用场景的需求。以下是一些MySQL的常用高级特性及其详细讲解&#xff1a; 1. 存储引擎 功能介绍 MySQL支持多种存储引擎&#xff0c;每种引擎在…

C++线程的使用

C11之前&#xff0c;C语言没有对并发编程提供语言级别的支持&#xff0c;这使得我们在编写可移植的并发程序时&#xff0c;存在诸多的不便。现在C11中增加了线程以及线程相关的类&#xff0c;很方便地支持了并发编程&#xff0c;使得编写的多线程程序的可移植性得到了很大的提高…

使用Java构建物联网应用的最佳实践

使用Java构建物联网应用的最佳实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着物联网&#xff08;IoT&#xff09;技术的快速发展&#xff0c;越来越…

【FFMPEG基础(一)】解码源码

学习分享 main函数decodetorgb32.h 文件decodetorgb32 .cpp文件 main函数 #include <QApplication> #include "decodetorgb32.h" int main(int argc, char *argv[]) {QApplication a(argc, argv);DecodeToRGB32 toRGB32;int restoRGB32.openVideo("../fi…

01 Web基础与HTTP协议

1.1 Web 基础 本章将介绍 Web 基础知识&#xff0c;包括域名的概念、DNS 原理、静态网页和动态网页的相关知识。 1.1.1.域名概述 1.域名的概念 ip地址不易记忆 2.早期使用host文件解析域名 主机名重复主机维护困难 3.DNS 分布式层次式 4.域名空间结构 根域顶级域 组…

InstantStyle-Plus:风格转移与内容保留在文本到图像的生成

在之前的文章中已经和大家介绍过小红书在风格保持方面的优秀工作InstantID和InstantStyle,感兴趣的小伙伴可以点击下面&#x1f447;链接阅读&#xff5e; 小红书InstantID来了, 一张照片几秒钟就能生成个性化图片, 无缝衔接Stable Diffusion&#xff09; InstantID作者新作&…

国外使用代理IP的安全风险

1. 数据泄露 当使用代理IP时&#xff0c;用户的真实IP地址被隐藏&#xff0c;但仍然存在数据泄露的风险。如果代理服务器没有进行恰当的安全措施&#xff0c;用户的个人信息和访问记录可能会被黑客窃取或监控。 2. 恶意软件 在使用代理IP时&#xff0c;用户可能会在代理服务器…

关于 Mac 系统 .DS_store 文件的起源

原文&#xff1a;Arno - 2006.10.01 &#xff08;前排提醒&#xff1a;可以在 .gitignore 中添加 .DS_Store&#xff0c;否则 git 仓库会存储这个和项目无关的文件。&#xff09; 如果你是 Mac 用户&#xff0c;曾经将文件从 Mac 传输到 Windows&#xff0c;那么可能对 .DS_S…

c++ word转换为pdf

在windows系统下&#xff0c;使用QAxObject效果是最好的 转60多兆的文件速度还是可以的&#xff0c;不建议使用多线程&#xff0c;因为多线程会多次调用转换函数&#xff0c;导致程序一直运行&#xff0c;只有全部转换完成后&#xff0c;程序才能继续向下运行&#xff0c;但是c…

SketchUp + Enscape+ HTC Focus3 VR

1. 硬件: 设备连接 2. 软件: 安装steam steamVR Vive Business streaming 3. 操作: 双方登录steam 账号,然后带上头盔,用手柄在HTC Focus3 安装 串流软件,选择串流软件,在Enscape中选择 VR 模式即可 4.最终效果: SketchUp Enscape HTC Focus 3 VR 实时预览_哔哩哔哩_bi…

云微客短视频矩阵全域营销,更高效的获客引流方式!

在抖音这样一个拥有海量用户和内容的短视频平台上&#xff0c;单一账号往往难以覆盖我们的客户群体&#xff0c;甚至于每天发布四五条视频&#xff0c;所引发的流量也是微乎其微的。在竞争如此激烈的市场环境中&#xff0c;商家企业无不想方设法追求更高效的获客引流方式&#…

SQL Server 查询死锁以及解决死锁的基本知识(图文)

目录 1. 基本知识2. 查看和解锁被锁的表3. 查看和处理数据库堵塞 1. 基本知识 在 SQL Server 中&#xff0c;死锁是指两个或多个进程互相等待对方持有的资源&#xff0c;从而无法继续执行的现象 要解决死锁问题&#xff0c;首先需要识别并分析死锁的发生原因&#xff0c;然后…

Floyd判圈算法——环形链表(C++)

Floyd判圈算法(Floyd Cycle Detection Algorithm)&#xff0c;又称龟兔赛跑算法(Tortoise and Hare Algorithm)&#xff0c;是一个可以在有限状态机、迭代函数或者链表上判断是否存在环&#xff0c;求出该环的起点与长度的算法。 …

什么是断路器模式?Hystrix在其中扮演什么角色?

断路器模式&#xff08;Circuit Breaker Pattern&#xff09; 断路器模式是一种设计模式&#xff0c;它用于在分布式系统中防止级联失败的发生。类比于电路中的断路器&#xff0c;该模式的核心思想是当系统检测到一些调用或响应出现问题&#xff08;如超时、异常等&#xff09…

科研绘图系列:R语言箱线图(boxplot)

介绍 使用 ggplot2 包画箱线图通常使用 geom_boxplot() 函数。箱线图(Boxplot)是一种用于展示一组数据分布特征的图形,它能够提供以下信息: 中位数:箱线图中的中位线表示数据的中位数。四分位数:箱线图的箱子部分表示数据的四分位数范围,即25%和75%分位数,这可以展示数…

SQL面试题练习 —— 各用户最长的连续登录天数-可间断

目录 1 题目2 建表语句3 题解 1 题目 现有各用户的登录记录表t_login_events如下&#xff0c;表中每行数据表达的信息是一个用户何时登录了平台。现要求统计各用户最长的连续登录天数&#xff0c;间断一天也算作连续&#xff0c;例如&#xff1a;一个用户在1,3,5,6登录&#xf…