37. JavaScript 执行

为什么需要 JS

DrissionPage 的 Python API 已经很强大了。但有些场景还是得靠 JS。

比如修改页面内部状态、拦截事件、操作那些没法直接访问的元素。

或者你就是想快速用 JS 的语法提取数据。

run_js() 基础

run_js() 是最常用的方法。

直接传入 JS 代码字符串就行：

from DrissionPage import ChromiumPage

page = ChromiumPage()
page.get('https://example.com')

# 执行简单 JS
result = page.run_js('return document.title;')
print(f'页面标题: {result}')

代码里要加 return 才能拿到返回值。

不需要返回值的时候可以省略：

# 没有返回值，直接执行
page.run_js('document.querySelector("#btn").click();')

多行 JS 代码

要执行多行代码，用三引号包裹：

result = page.run_js('''
    const heading = document.querySelector('h1');
    if (heading) {
        return heading.textContent;
    } else {
        return 'No heading found';
    }
''')
print(f'标题: {result}')

返回值类型

run_js() 会自动把 JS 的返回值转成 Python 对象：

# 字符串
text = page.run_js('return "Hello";')        # str

# 数字
num = page.run_js('return 42;')              # int

# 布尔
flag = page.run_js('return true;')           # True

# 数组
arr = page.run_js('return [1, 2, 3];')       # list

# 对象
obj = page.run_js('return {name: "Kim"};')   # dict

传递参数

run_js() 支持把 Python 的值传给 JS。

用 arguments[0]、arguments[1] 接收：

# 传一个参数
username = 'Alice'
page.run_js('document.querySelector("#user").value = arguments[0];', username)

# 传多个参数
page.run_js('''
    document.querySelector("#user").value = arguments[0];
    document.querySelector("#pass").value = arguments[1];
''', 'Alice', 'secret123')

也能传字典：

user = {'name': 'Alice', 'age': 25}
page.run_js('''
    const data = arguments[0];
    console.log(data.name, data.age);
''', user)

run_async_js()

如果 JS 里用了 Promise，就用 run_async_js()。

它会等异步操作完成再返回：

# 等待异步操作完成
result = page.run_async_js('''
    return new Promise((resolve) => {
        setTimeout(() => resolve('异步结果'), 1000);
    });
''')
print(result)  # '异步结果'

用来等待动态内容加载很方便：

data = page.run_async_js('''
    return new Promise((resolve) => {
        const check = () => {
            const el = document.querySelector('#loaded-item');
            if (el) {
                resolve(el.textContent);
            } else {
                setTimeout(check, 200);
            }
        };
        check();
    });
''')

在元素上执行 JS

run_js() 也能在单个元素对象上调用。

这时候 JS 里的 this 指向这个元素：

form = page.ele('form#login')

# this 就是 form 元素
form_data = form.run_js('''
    const inputs = this.querySelectorAll('input');
    const data = {};
    inputs.forEach(item => {
        if (item.name) data[item.name] = item.value;
    });
    return data;
''')
print(form_data)

常用场景

控制页面滚动

# 滚动到底部
page.run_js('window.scrollTo(0, document.body.scrollHeight);')

# 滚动到顶部
page.run_js('window.scrollTo(0, 0);')

# 滚动到指定元素
page.run_js('''
    document.querySelector('#section3')
        .scrollIntoView({behavior: 'smooth'});
''')

获取页面信息

info = page.run_js('''
    return {
        title: document.title,
        url: location.href,
        cookies: document.cookie,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    };
''')
print(info)

修改元素样式

# 高亮某个元素
page.run_js('''
    const el = document.querySelector('#target');
    el.style.backgroundColor = 'yellow';
    el.style.border = '2px solid red';
''')

删除页面元素

# 移除广告、弹窗等
page.run_js('''
    document.querySelectorAll('.ad, .popup, .cookie-banner')
        .forEach(el => el.remove());
''')

操作 localStorage

# 写入
page.run_js('localStorage.setItem("token", "abc123");')

# 读取
token = page.run_js('return localStorage.getItem("token");')
print(token)

注入持久函数

有些 JS 函数要反复用，可以注入到页面上：

# 定义一个全局函数
page.run_js('''
    window.getPageInfo = function() {
        return {
            title: document.title,
            url: location.href,
            time: new Date().toISOString()
        };
    };
''')

# 之后随时调用
info = page.run_js('return window.getPageInfo();')
print(info)

注意事项

1. 返回值类型：DOM 元素没法直接返回成 Python 对象，会变成字典
2. 异步操作：涉及 Promise 必须用 run_async_js()
3. JS 错误：代码写错会抛异常，注意捕获
4. 注入时机：页面跳转后之前注入的函数就没了，需要重新注入

小结

run_js() 让你在 Python 脚本里嵌入 JS 能力，两者互补。

简单操作用 run_js()，异步操作用 run_async_js()，元素上下文操作用 element.run_js()。

传参用 arguments[0]，返回值会自动转成 Python 类型。