易语言与JS框架网页刷新如何协同？-网页设计-锦华智联科技

易语言作为桌面客户端，通过其内置的网页浏览器控件嵌入一个网页,然后通过易语言的代码去控制这个网页的刷新。
易语言作为后端服务器（易语言支持Web服务器开发），在生成的HTML页面中嵌入JavaScript,通过易语言代码触发前端的刷新。

下面我将分别对这两种情况进行详细说明。

（图片来源网络，侵删）

易语言桌面程序控制网页浏览器控件

这是最常见的需求，易语言的_启动_网页浏览器命令或_添加_网页浏览器控件，本质上都是调用系统内置的 Microsoft Edge (Chromium) 内核浏览器，我们可以直接使用现代JavaScript语法,包括jQuery。

第一步：在网页中引入 jQuery

你需要在你的HTML文件中引入jQuery库，最简单的方式是使用CDN（内容分发网络）。

示例 HTML (my_page.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">易语言控制示例</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        #refreshBtn { padding: 10px 20px; font-size: 16px; cursor: pointer; }
        #status { margin-top: 20px; color: #666; }
    </style>
</head>
<body>
    <h1>易语言控制页面刷新</h1>
    <button id="refreshBtn">点击刷新页面</button>
    <div id="status">页面已加载</div>
    <script>
        // 当页面加载完成后执行
        $(document).ready(function() {
            // 监听按钮点击事件
            $("#refreshBtn").on("click", function() {
                alert("按钮被点击，准备刷新！");
                // 方法一：使用jQuery刷新整个页面
                // location.reload(); // 这是最直接的方法
                // 方法二：使用纯JavaScript刷新整个页面 (更常用)
                window.location.reload();
            });
            // 模拟页面内容变化，方便观察
            let count = 0;
            setInterval(function() {
                count++;
                $("#status").text("页面内容已自动更新 " + count + " 次。");
            }, 3000);
        });
    </script>
</body>
</html>

第二步：易语言代码执行网页中的JS函数

易语言提供了两个核心命令来与网页浏览器控件交互：

（图片来源网络，侵删）

网页浏览器.执行脚本(脚本内容): 执行一段JS代码,并返回最后一个表达式的值。
网页浏览器.取脚本执行返回值(): 获取执行脚本命令的返回结果。

易语言代码示例:

.版本 2
.程序集 窗口程序集_启动窗口
.子程序 __启动窗口_创建完毕
.局部变量 浏览器地址, 文本型
' 设置要加载的网页路径
' 注意：这里需要使用你的HTML文件的完整路径或相对路径
' 如果HTML文件和易语言程序在同一目录下，可以直接写文件名
浏览器地址 = "C:\path\to\your\my_page.html" ' <--- 修改为你的HTML文件路径
' 创建并显示网页浏览器控件
_启动_网页浏览器 (浏览器地址, , 真, , 真)
.子程序 _按钮_刷新_被单击
.局部变量 返回值
' --- 核心代码 ---
' 方法1：直接执行JS代码刷新页面 (最简单直接)
输出调试文本 ("正在执行 window.location.reload()...")
网页浏览器1.执行脚本 ("window.location.reload();")
' 方法2：调用网页中已定义的JS函数 (更灵活)
' 假设我们的HTML中有一个名为 myRefreshFunction 的函数
' 网页浏览器1.执行脚本 ("myRefreshFunction();")
' 方法3：获取JS执行后的返回值 (获取页面标题)
' 返回值 = 网页浏览器1.执行脚本 ("document.title;")
' 信息框 ("页面标题是：" + 返回值, 0, , )

代码解释

_启动_网页浏览器: 这个命令会打开一个独立的浏览器窗口来显示你的网页，如果你想在易语言窗口内嵌入一个浏览器，应该使用_添加_网页浏览器控件，然后通过网页浏览器1.地址 = "..."来加载页面。
网页浏览器1.执行脚本 ("window.location.reload();"): 这是关键。
- 网页浏览器1: 指的是你的网页浏览器控件（或由_启动_网页浏览器创建的默认浏览器对象）。
- .执行脚本: 是命令,告诉控件执行一段JavaScript代码。
- "window.location.reload();": 这就是我们要执行的JS代码。window.location对象包含了当前页面的URL信息，调用它的reload()方法就会强制刷新页面。
为什么使用 window.location.reload() 而不是 location.reload()? 两者在大多数情况下效果相同，但显式地加上 window. 可以确保在所有作用域下都能正确执行,是一种更健壮的写法。

易语言Web服务器端触发前端刷新

这种情况下，易语言本身扮演Web服务器的角色，当客户端（浏览器）访问易语言提供的网址时，易语言生成HTML页面并发送给浏览器，我们可以在生成的HTML中嵌入一段JS代码,并通过URL参数来控制JS是否执行刷新。

易语言Web服务器端代码示例

.版本 2
.程序集 Web服务器程序集_Web服务器
.子程序 _数据_请求, , 公开
.参数 客户端请求, 对象
.局部变量 html代码, 文本型
.局部变量 是否刷新, 文本型
' 从URL参数中获取 "refresh" 的值， http://localhost:8080/?refresh=1
是否刷新 = 客户端请求.取参数 ("refresh", )
' 构建要返回给客户端的HTML代码
html代码 = "<!DOCTYPE html>" + #换行符
html代码 = html代码 + "<html><head><title>易语言Web服务器刷新示例</title>" + #换行符
html代码 = html代码 + "<script src=""https://code.jquery.com/jquery-3.7.1.min.js""></script>" + #换行符
html代码 = html代码 + "</head><body>" + #换行符
html代码 = html代码 + "<h1>这是一个由易语言Web服务器生成的页面</h1>" + #换行符
html代码 = html代码 + "<p>当前时间是：" + 到文本 (取现行时间 ()) + "</p>" + #访问时显示时间
' 判断URL参数，如果refresh=1，则嵌入自动刷新的JS代码
.(是否刷新 = "1")
    html代码 = html代码 + "<script>" + #换行符
    html代码 = html代码 + "    alert('服务器指令：刷新页面！');" + #换行符
    html代码 = html代码 + "    window.location.reload();" + #换行符
    html代码 = html代码 + "</script>" + #换行符
.否则
    html代码 = html代码 + "<p>在URL后添加 ?refresh=1 来测试自动刷新。</p>" + #换行符
.如果结束
html代码 = html代码 + "</body></html>"
' 设置响应头，告诉浏览器返回的是HTML内容
客户端请求.输出.设置响应头 ("Content-Type", "text/html; charset=utf-8")
' 将HTML代码发送给客户端
客户端请求.输出.写 (html代码)

如何使用这个示例

运行这段易语言代码，它会启动一个Web服务器,默认监听在8080端口。
在你的浏览器中访问 http://localhost:8080/，你会看到一个页面，显示当前时间,并提示如何测试。
然后在地址栏修改URL为 http://localhost:8080/?refresh=1 并回车。
浏览器会先弹出一个alert提示，然后页面立即刷新，刷新后的页面时间会更新，并且因为URL参数依然是?refresh=1，所以它会不断刷新,形成无限循环的效果。

总结与注意事项

特性	场景一 (桌面客户端)	场景二 (Web服务器)
核心命令	`网页浏览器.执行脚本()`	在生成的HTML中嵌入`<script>`
刷新方式	强制执行 `window.location.reload()`	同上，但由URL参数触发
主要用途	控制本地嵌入的或打开的网页内容	实现页面状态的实时更新或重定向

（图片来源网络，侵删）