Posted at

ClojureScriptでページ内URL操作(pushState, popState)

More than 1 year has passed since last update.


はじめに

pushState popStateとはReactを利用したサイトのように,ページ内遷移しか発生しなくとも,URLを書き換え履歴に追加し,ブラウザバックに対応することができる仕組みです.

javascriptやjQueryではやり方が多々紹介されているのですが,cljsで行う際に若干詰まったので一言備忘録を残しておきます(ほぼjsからの変換そのままです).


cljsでpushState, popState

(def data (atom {}))

...

;; pushState
(-> js/window .-history (.pushState #js {:data (pr-str data)} nil (str "/url"))))

;; popState
(set! (.-onpopstate js/window)
#(when-not (nil? (aget % "state"))
(when-let [d (cljs.reader/read-string (aget % "state" "data"))]
(swap! data d))))