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

【问题标题】：Writing handlers for JS.Window.Onpopstate in Websharper在 Websharper 中为 JS.Window.Onpopstate 编写处理程序
【发布时间】：2015-05-16 00:27:16
【问题描述】：

我正在尝试在我的 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 用于获取状态，即使相应的“真实”Javascript 事件确实如此。

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

【问题讨论】：

标签： f# browser-history websharper

【解决方案1】：

您可以使用动态运算符? 访问对象中的任意字段：

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

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

【讨论】：

【解决方案2】：

事实证明，您可以像这样从任意 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)
)

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

【讨论】：