易语言js修改网页内容-网页设计-锦华智联科技

这是一个非常强大的功能,它允许易语言程序与正在运行的浏览器进行交互，实现自动化操作、数据抓取、网页测试等高级应用。

（图片来源网络，侵删）

核心原理

易语言本身无法直接操作网页,网页是在浏览器中渲染的，由 HTML、CSS 和 JavaScript 组成，易语言要修改网页，必须借助一个“桥梁”来和浏览器里的 JS 通信。

这个“桥梁”就是浏览器自动化工具，最常用和最强大的是 Selenium。

工作流程如下：

易语言程序 启动一个浏览器（如 Chrome、Firefox）。
易语言程序 通过 Selenium 的驱动（chromedriver.exe）向浏览器发送指令。
浏览器 执行这些指令，比如打开一个网址。
当网页加载完成后,易语言程序 再次通过 Selenium 向浏览器发送一个特殊的指令：“请执行我给你的一段 JS 代码”。
浏览器接收到这段 JS 代码后，就在当前网页的上下文中执行它。
这段 JS 代码可以修改网页的 HTML 元素、内容、样式，或者触发各种事件。
易语言程序 可以等待执行结果，或者继续发送新的指令。

准备工作

在开始编写易语言代码之前,你需要完成以下准备工作：

（图片来源网络，侵删）

安装 Selenium 库

Selenium 是一个 Python 库，但我们可以通过调用外部程序的方式在易语言中使用它，你需要先安装 Python，然后通过 pip 安装 Selenium。

安装 Python: 前往 Python 官网下载并安装，安装时请勾选 "Add Python to PATH"。
安装 Selenium: 打开命令提示符（CMD）或 PowerShell，输入以下命令并回车：
```
pip install selenium
```

下载浏览器驱动

Selenium 需要一个特定于浏览器的驱动来控制浏览器。

如果你使用 Chrome 浏览器:
1. 确定你的 Chrome 浏览器版本（在 Chrome 地址栏输入 chrome://settings/help 查看）。
2. 前往 Chrome for Testing availability 下载对应版本的 chromedriver.exe。
3. 将下载的 chromedriver.exe 文件放到一个固定的路径，C:\Selenium\chromedriver.exe，为了方便，你也可以把它放到你的易语言程序所在的同一目录下。
如果你使用 Firefox 浏览器:
（图片来源网络，侵删）
1. 下载与你的 Firefox 版本匹配的 geckodriver.exe。
2. 同样,将它放到一个固定的路径。

易语言实现步骤

我们将创建一个易语言程序,实现以下功能：

打开 Chrome 浏览器并访问百度。
使用 JS 修改百度搜索框的默认文字。
使用 JS 在百度首页的页脚添加一段新的文字。
使用 JS 弹出一个提示框。

步骤 1：创建易语言程序

打开易语言,创建一个“Windows 窗口程序”。

步骤 2：添加一个“执行”按钮

在窗口上添加一个按钮,并将其“标题”属性改为“执行 JS 操作”。

步骤 3：编写核心代码

双击“执行”按钮，进入“_按钮_被单击”事件，在其中编写如下代码：

.版本 2
.程序集 窗口程序集_启动窗口
.子程序 _按钮_被单击, , 公开
.局部变量 python脚本, 文本型
.局部变量 driver路径, 文本型
.局部变量 浏览器路径, 文本型
.局部变量 执行结果, 文本型
' --- 1. 设置路径 ---
' 请根据你的实际情况修改这两个路径
driver路径 = "C:\Selenium\chromedriver.exe"  ' chromedriver的完整路径
浏览器路径 = "C:\Program Files\Google\Chrome\Application\chrome.exe" ' Chrome浏览器的完整路径
' --- 2. 构建要执行的Python脚本 ---
' 这是一个多行字符串，包含了完整的Python代码，用来通过Selenium执行JS
python脚本 = .版本 2
.如果真 (取文件是否存在 (driver路径) = 假)
    信息框 ("找不到chromedriver.exe，请检查路径是否正确！", 0, , )
    返回 ()
.如果真结束
python脚本 = "import selenium.webdriver as webdriver" + #换行符 + 
             "from selenium.webdriver.chrome.service import Service" + #换行符 + 
             "import time" + #换行符 + 
             #换行符 +
             "try:" + #换行符 + 
             "    # 设置Chrome驱动路径和浏览器路径" + #换行符 + 
             '    service = Service(executable_path="' + driver路径 + '")' + #换行符 + 
             '    options = webdriver.ChromeOptions()' + #换行符 + 
             '    options.binary_location = "' + 浏览器路径 + '"' + #换行符 + 
             "    driver = webdriver.Chrome(service=service, options=options)" + #换行符 + 
             #换行符 +
             "    # 打开百度首页" + #换行符 + 
             '    driver.get(\"https://www.baidu.com\")' + #换行符 + 
             "    time.sleep(2)  # 等待页面加载" + #换行符 + 
             #换行符 +
             "    # --- JS 代码开始 ---" + #换行符 + 
             "    js_code1 = \"\"\"document.getElementById('kw').value = '你好，来自易语言！';\"\"\"" + #换行符 + 
             "    driver.execute_script(js_code1)" + #换行符 + 
             "    print('JS1执行成功：修改了搜索框内容')" + #换行符 + 
             #换行符 +
             "    js_code2 = \"\"\"var newDiv = document.createElement('div'); newDiv.innerHTML = '<p style=\"color:red;\">这段文字是由易语言通过JS添加的！</p>'; document.body.appendChild(newDiv);\"\"\"" + #换行符 + 
             "    driver.execute_script(js_code2)" + #换行符 + 
             "    print('JS2执行成功：添加了新元素')" + #换行符 + 
             #换行符 +
             "    js_code3 = \"\"\"alert('易语言向你问好！');\"\"\"" + #换行符 + 
             "    driver.execute_script(js_code3)" + #换行符 + 
             "    print('JS3执行成功：弹出了提示框')" + #换行符 + 
             "    # --- JS 代码结束 ---" + #换行符 + 
             #换行符 +
             "    time.sleep(5)  # 等待5秒，让你能看到效果" + #换行符 + 
             "    driver.quit()" + #换行符 + 
             "    print('浏览器已关闭')" + #换行符 + 
             "except Exception as e:" + #换行符 + 
             "    print(f'发生错误: {e}')" + #换行符 + 
             "    if 'driver' in locals():" + #换行符 + 
             "        driver.quit()"
' --- 3. 调用Python脚本并获取输出 ---
' 使用 运行() 命令来执行Python代码
执行结果 = 运行 ("python", "-c", python脚本, , , , 真, , , , 真)
' --- 4. 显示结果 ---
信息框 ("脚本执行完毕！Python脚本的输出如下：\n\n" + 执行结果, 0, , )

代码详解

路径设置:
- driver路径 和 浏览器路径 必须修改为你电脑上的实际路径，使用 取文件是否存在() 函数可以做一个简单的校验。
构建 Python 脚本:
- 我们使用 文本型 变量 python脚本 来动态构建一段完整的 Python 代码。
- #换行符 是易语言中表示换行的特殊字符，它确保每一行 Python 代码都是独立的。
- Selenium 基础代码:
  - import ...: 导入必要的 Selenium 模块。
  - Service(...): 指定 chromedriver.exe 的位置。
  - ChromeOptions(): 配置浏览器选项，我们用它来指定 chrome.exe 的位置。
  - webdriver.Chrome(...): 创建一个 Chrome 浏览器实例。
  - driver.get(...): 打开指定的网址。
  - driver.quit(): 关闭浏览器并释放资源。
  - time.sleep(): 暂停程序执行，等待页面加载或观察效果。
核心：driver.execute_script():
- 这是 Selenium 执行 JavaScript 代码的关键方法。
- 我们构建了三个 js_code 变量，分别存放了不同的 JS 代码。
- js_code1: document.getElementById('kw').value = '你好，来自易语言！';
  - document.getElementById('kw'): 在网页中查找 id 为 kw 的元素（百度搜索框的 ID）。
  - .value = '...': 将该元素的值（即输入框里的文字）修改为新的字符串。
- js_code2: 动态创建并添加元素。
  - document.createElement('div'): 创建一个新的 <div> 元素。
  - newDiv.innerHTML = '...': 设置这个 div 的内部 HTML 内容。
  - document.body.appendChild(newDiv): 将这个新的 div 添加到网页的 <body> 末尾。
- js_code3: alert('...'): 调用浏览器原生的弹窗功能。
执行和获取结果:
- 运行 ("python", "-c", python脚本, ...):
  - python: 调用 Python 解释器。
  - -c: 表示后面跟着的字符串是 Python 代码，直接执行。
  - python脚本: 我们构建好的那段完整代码。
  - 最后的 真 参数表示“等待程序执行完毕”，这样我们才能获取到 print 输出的内容。
- 执行结果: 变量 执行结果 会捕获 Python 脚本中所有 print() 函数输出的内容。
- 最后用 信息框 将执行结果展示给用户。

运行效果

确保所有路径正确。
运行易语言程序。
点击“执行 JS 操作”按钮。
系统会自动打开一个 Chrome 窗口并访问百度。
你会看到：
- 百度搜索框的文字瞬间变成了“你好，来自易语言！”。
- 页面底部出现了一段红色的文字。
- 弹出一个浏览器原生的提示框。
5秒后,浏览器自动关闭，易语言程序会弹出一个信息框，显示 Python 脚本的执行日志。

总结与扩展

通过这种方式,易语言可以“控制”网页，实现非常复杂的自动化任务。

可以进一步探索的方向：

查找元素: 除了 getElementById，还可以用 getElementsByClassName, querySelector 等更强大的 JS 选择器来定位元素。
触发事件: 使用 document.getElementById('kw').click() 来模拟点击按钮。
: 使用 return document.title; 这样的 JS 代码，Selenium 会将返回值传给易语言。执行结果 = driver.execute_script("return document.title;")。
处理下拉框、弹窗: Selenium 有专门的方法来处理这些复杂场景。
截图: driver.save_screenshot('screenshot.png')，可以在 Python 脚本中加入这行来保存当前网页截图。

这种方法虽然需要依赖 Python 环境，但它为易语言打开了一扇通往现代 Web 自动化世界的大门，极大地扩展了易语言的应用范围。