浏览器中js外挂脚本的执行方式

1、开发工具控制台交互执行

网页中按F12打开开发者工具,选择"控制台",键入js脚本命令回车执行,适用于临时使用脚本逻辑简单的场景,实例如下:

javascript 复制代码
// 获取网页元素的文本脚本
var elem = document.getElementById("elem_id"); 
var elem_text = copyText.innerText; 
elem_text

以获取该网页https://www.52pojie.cn/thread-1941978-1-1.html标题文本为例,具体操作如下:

首先获取元素id,如当前帖子标题id为thread_suject

然后根据元素id,编写js脚本命令获取元素文本,如下图所示标题文本获取成功

2、开发工具中编写js代码文件片段执行

网页中按F12打开开发者工具,选择"源代码"->"片段"->"新片段",键入js脚本代码,点击运行按钮执行,适用于脚本逻辑复杂的场景,实例如下:

点击运行后,切换至控制台,可发现标题文本已经获得

3、建立网页收藏夹执行

打开浏览器收藏夹管理器,新建收藏夹,添加名称为"获取帖子主题元素文本",并将URL中键入上述脚本(PS:脚本前需要加上"javascript:"前缀说明脚本是js脚本,否则脚本无法解析执行),如下图所示:

javascript 复制代码
javascript:var elem = document.getElementById("thread_subject"); var elem_text = elem.innerText; elem_text;

添加完收藏夹后,切换至帖子页面,点击收藏夹执行脚本

执行结果如下图所示:

相关推荐
码事漫谈6 分钟前
大模型输出的“隐性结构塌缩”问题及对策
前端·后端
贵沫末25 分钟前
python——打包自己的库并安装
开发语言·windows·python
这儿有一堆花32 分钟前
前端三件套真的落后了吗?揭开现代 Web 开发的底层逻辑
前端·javascript·css·html5
文祐36 分钟前
C++类之虚函数表及其内存布局(一个子类继承一个父类)
开发语言·c++
.Cnn1 小时前
JavaScript 前端基础笔记(网页交互核心)
前端·javascript·笔记·交互
zuowei28891 小时前
华为网络设备配置文件备份与恢复(上传、下载、导出,导入)
开发语言·华为·php
醉酒的李白、1 小时前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
xiaohe071 小时前
超详细 Python 爬虫指南
开发语言·爬虫·python
anOnion1 小时前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
嗑嗑嗑瓜子的猫2 小时前
Java!它值得!
java·开发语言