在 Websharper 中为 JS.Window.Onpopstate 编写处理程序

Question

我正在尝试在我的 WebSharper 应用程序中获得适当的后退按钮支持。我可以把东西放在历史上就好了：

type MyRecord = { foo: int; bar: string } 
JS.Window.History.PushState({foo=10; bar="hello"}, "", "mysuffix")

我希望通过执行以下操作为 onpopstate 添加相应的处理程序：

JS.Window.Onpopstate <- (fun e -> Javascript.Console.Info e.State.bar)

很遗憾，此事件的类型为 Js.Window.Onpopstate : Dom.Event -> Unit Dom.Event 没有用于返回状态的字段 State，即使对应的 "real" Javascript 事件有。

如何在 Onpopstate 处理程序中访问使用 PushState 存储的状态？

Answer 1

事实证明，您可以像这样从任意 Javascript 中检索值：

[<Inline "$e.state">]
let stateOf (e : JavaScript.Dom.Event) = 
   Unchecked.defaultof<MyRecord>

我现在可以编写我的 onpopstate 处理程序：

JS.Window.Onpopstate <- (fun e -> 
  Javascript.Console.Info ((stateOf e).bar)
)

需要注意的是，提供嵌套记录、class 类型参数和设置为 PushState 通常不起作用。浏览器有义务仅存储您传递给 PushState 的任何内容的 JSON 可序列化部分；并且刚才提到的所有类型都实现为 Javascript 对象。

Answer 2

您可以使用动态运算符从对象访问任意字段 ?:

JS.Window.Onpopstate <- (fun e ->
    Console.Info e?state.bar
)

但是请注意，您仍然需要使用 [<Inline>] 来调用任意方法。

Writing handlers for JS.Window.Onpopstate in Websharper