当前位置: 首页 > news >正文

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

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

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

相关文章:

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

目录 1、网页内容无法选中 1.1、问题原因 1.2、解决脚本 1.2.1、开启控制台窗口 1.2.2、执行脚本命令 2、内容复制弹出阻止框 2.2、解决脚本 1、网页内容无法选中 1.1、问题原因 今天在访问某一网站平台&#xff0c;需要将内容进行选择、复制时发现不可使用。 在使用…...

C#中委托与事件

一、委托 在面向对象中&#xff0c;我们可以将任何数据类型作为参数传递给方法&#xff0c;能否将一个方法作为参数传递给另一个方法&#xff1f;C#中通过委托可以实现将方法作为参数进行传递。 1.1概念 委托是一种引用类型&#xff0c;它可以用于封装并传递方法作为参数。委…...

通用后台管理(二)——项目搭建

目录 前言 一、安装vue-cli依赖 1、使用yarn下载vue-cli 2、使用npm下载 3、检查一下是否下载成功 二、创建项目 1、创建项目&#xff0c;my-app是项目名称 2、 这里选择vue 2&#xff0c;蓝色表示选中的。 3、启动项目 三、下载项目依赖 四、配置项目 1、修改esli…...

多模态大模型之达摩院通义MPLUG

引言 随着人工智能技术的飞速发展&#xff0c;多模态技术逐渐成为研究的热点。它结合了文本、图像、声音等多种数据类型&#xff0c;为机器理解世界提供了更丰富的视角。本文根据严明老师的达摩院通义MPLUG多模态预训练技术分享&#xff0c;及其在电商等行业的应用实践&#x…...

文章翻译记录

以 PINN 为基础&#xff0c;我们开发了一个框架&#xff0c;用于在不同震源位置和速度模型下进行地震建模。本研究的显著贡献包括&#xff1a; 1. 为了提高网络对不同速度模型的泛化能力&#xff0c;必须将速度变量 vp 作为系统的输入参数。本研究从监督学习中汲取灵感&#xf…...

C++ 语法习题(2)

第三讲 循环语句 1.偶数 编写一个程序&#xff0c;输出 1 到 100之间&#xff08;包括 1 和 100&#xff09;的全部偶数。 输入格式 无输入。 输出格式 输出全部偶数&#xff0c;每个偶数占一行。 输入样例 No input输出样例 2 4 6 ... 100 参考代码: #include <i…...

使用Gstreamer时遇到WARNING: erroneous pipeline: no element “x264enc“(亲测有效)

WARNING: erroneous pipeline: no element “x264enc” 解决&#xff1a; 我下了gstreamer1.0-plugins-ugly包就解决了 sudo apt install -y gstreamer1.0-plugins-ugly...

SAP 新增移动类型简介

在SAP系统中新增移动类型的过程涉及多个步骤,‌包括复制现有的移动类型、‌调整科目设置以及进行必要的测试。‌以下是新增移动类型的一般步骤和关键点:‌ 复制现有的移动类型:‌ 使用事务代码OMJJ进入移动类型维护界面。‌ 勾选移动类型 这里不填写移动类型,然后直接下…...

SQL性能优化策略

发现问题 通过业务监控发现慢SQL或接口响应延迟。利用性能分析工具定位问题。 定位SQL语句 使用监控工具确定影响性能的SQL语句和表。 SQL查询变慢原因 索引失效&#xff1a;查询未使用索引或索引效率低。多表连接&#xff1a;JOIN操作导致性能下降。查询字段过多&#xf…...

代码随想录第四十八天 | 198.打家劫舍, 213.打家劫舍II,337.打家劫舍III

198.打家劫舍 看完想法&#xff1a;这里的偷/不偷&#xff0c;和背包问题中的放/不放感觉是一个道理&#xff0c;所以在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大都是静态类&#xff0c;加密解密&#xff0c;反射操作&#xff0c;树结构&#xff0c;文件探测&#xff0c;权重随机筛选算法&#xff0c;分布式短id&#xff0c;表达式树&#xff0c;linq扩展&#xff0c;文件压缩&#xff0c;多线程下载&#xf…...

首席数据官CDO证书报考指南:方式、流程、适考人群与考试难度

在信息泛滥的今天&#xff0c;数据已转变为企业不可或缺的宝贵资源。 面对海量的信息&#xff0c;如何提炼出价值&#xff0c;为企业带来实质性的收益&#xff1f;首席数据官&#xff08;CDO&#xff09;认证的出现正是为了满足这一需求&#xff0c;它不仅是个人专业能力的体现…...

数据库基础复习

数据库简介 关系型数据库&#xff1a;Mysql 、Oracle 、SqlServer.... DB2 达梦 非关系型数据库&#xff1a;Redis 、MongoDB... MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管…...

探索AI大模型(LLM)减少幻觉的三种策略

大型语言模型&#xff08;LLM&#xff09;在生成文本方面具有令人瞩目的能力&#xff0c;但在面对陌生概念和查询时&#xff0c;它们有时会输出看似合理却实际错误的信息&#xff0c;这种现象被称为“幻觉”。近期的研究发现&#xff0c;通过策略性微调和情境学习、检索增强等方…...

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十三章 Linux连接档

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...

鸿蒙语言基础类库:【@ohos.uri (URI字符串解析)】

URI字符串解析 说明&#xff1a; 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 导入…...

JavaScript---new Map()用法

new Map 创建 Map 对象设置键值对获取值检查键是否存在键值对数量删除键值对清空所有键值对迭代 Map 在JavaScript中&#xff0c;Map 是一个构造函数&#xff0c;用于创建 Map 对象&#xff0c;它可以存储键值对集合。与普通的对象不同&#xff0c;Map 的键可以是任何类型的值&…...

【数据基础】— 基于Go1.19的站点模板爬虫的实现

目录 1. 定义目标站点 2. 使用Go的库 3. 发送HTTP请求 4. 解析HTML并提取数据 5. 存储数据 6. 并发处理 示例代码 基于Go 1.19的站点模板爬虫实现通常涉及几个关键步骤&#xff1a;定义目标站点、解析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&#xff0c; 给代码中注入新的方法# http…...

el-table 鼠标移入更改悬停背景颜色

鼠标悬停时需要更改当前行背景颜色&#xff0c;一开始写的颜色会改变&#xff0c;但是一闪而过就没了 这是因为移入移出的动画效果导致的 .el-table__body {.el-table__row:hover {background-color: pink !important;}} 更改为后面的代码&#xff0c;就可以了 .el-table__…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

使用 uv 工具快速部署并管理 vLLM 推理环境

uv&#xff1a;现代 Python 项目管理的高效助手 uv&#xff1a;Rust 驱动的 Python 包管理新时代 在部署大语言模型&#xff08;LLM&#xff09;推理服务时&#xff0c;vLLM 是一个备受关注的方案&#xff0c;具备高吞吐、低延迟和对 OpenAI API 的良好兼容性。为了提高部署效…...