浏览器中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;

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

执行结果如下图所示:

相关推荐
qq_1208409371几秒前
Three.js 大场景分块加载实战:从全量渲染到可视集调度
开发语言·javascript·数码相机
csbysj20206 分钟前
Pandas 常用函数
开发语言
yivifu15 分钟前
手搓HTML双行夹批效果
前端·html·html双行夹注
小小码农Come on24 分钟前
C++访问QML控件-----QML访问C++对象属性和方法
java·开发语言·c++
代码中介商41 分钟前
C语言函数完全指南:从基础到实践
c语言·开发语言
奔跑的卡卡1 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能
思茂信息1 小时前
CST交叉cable的串扰(crosstalk)仿真
服务器·开发语言·人工智能·php·cst
IT_陈寒1 小时前
Redis批量删除的大坑,差点让我加班到天亮
前端·人工智能·后端
lolo大魔王1 小时前
Go语言的反射机制
开发语言·后端·算法·golang
帆张芳显1 小时前
智表ZCELL产品V3.6 版发布,新增系统预置右键菜单操作、页签栏操作等功能
前端·canva可画·excel插件