如何在TMS WEB Core中检测URL是否发生变化？

由于TWebForm.OnHashChange仅能检测哈希值变化，无法覆盖pushState/replaceState修改URL的场景，你可以通过以下方式实现全场景的URL变化检测：

实现步骤 #

1. 重写pushState/replaceState方法，触发自定义事件 #

原生的pushState和replaceState不会触发popstate事件，因此需要先包装这两个方法，让它们在调用时派发自定义的urlchange事件，确保代码主动修改URL时也能被检测到。

2. 监听popstate和自定义urlchange事件 #

同时监听浏览器前进后退触发的popstate事件，以及我们自定义的urlchange事件，将两者的处理逻辑统一到同一个Delphi方法中。

完整代码示例 #

表单类声明

type
  TForm1 = class(TWebForm)
    procedure WebFormCreate(Sender: TObject);
  private
    procedure HandleURLChange(Event: TJSBaseEvent);
  public
    { Public declarations }
  end;

表单创建事件（初始化监听逻辑）

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  // 重写history的pushState和replaceState方法，触发自定义urlchange事件
  asm
    // 保存原始方法引用
    const originalPushState = window.history.pushState;
    const originalReplaceState = window.history.replaceState;

    // 包装pushState
    window.history.pushState = function(state, title, url) {
      const result = originalPushState.call(this, state, title, url);
      // 派发自定义事件
      window.dispatchEvent(new Event('urlchange'));
      return result;
    };

    // 包装replaceState
    window.history.replaceState = function(state, title, url) {
      const result = originalReplaceState.call(this, state, title, url);
      window.dispatchEvent(new Event('urlchange'));
      return result;
    };
  end;

  // 注册popstate事件监听（对应浏览器前进/后退）
  TJSDocument.Default.addEventListener('popstate', @HandleURLChange);
  // 注册自定义urlchange事件监听（对应pushState/replaceState调用）
  TJSDocument.Default.addEventListener('urlchange', @HandleURLChange);
end;

URL变化处理方法

procedure TForm1.HandleURLChange(Event: TJSBaseEvent);
begin
  // 这里编写URL变化后的处理逻辑，比如通知业务层或执行刷新操作
  ShowMessage('URL已发生变化');
end;

说明 #

• 该方案兼容所有支持HTML5 History API的主流浏览器，不需要依赖兼容性较差的Navigation API。
• 无论用户通过浏览器前进后退操作，还是代码调用pushState/replaceState修改URL，都会触发HandleURLChange方法，满足你仅需检测URL变化的需求。

内容的提问来源于stack exchange，提问作者Shaun Roselt