JavaScriptでScrapboxのページ遷移をする

Scrapboxのページ遷移で実現されている、DOMの書き換えによる高速なページ遷移を、UserScript上から実行する

普通にページ移動をしようとすると、ページ全体が再読込されてしまう

結論

code:js

const link = document.createElement("a")

link.href = "/:projectname/:pagetitle" // 必要なら行IDも追記する

document.body.append(link)

link.click()

link.remove()

一時的にbodyの中に入れてからクリックを実行しないと、ページ全体が再読込されてしまう（full document load）

bodyに設定されているページ遷移用のEventListenerが発火しないため

結論（scrapbox-userscript-stdを使用する場合）

code:with_userscript-std.ts

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

declare const scrapbox: Scrapbox;

open(scrapbox.Project.name, ":pagetitle");

Mijinko_SD.icon自身もよくわからないんだけど、どうやらdocument自身にイベントリスナー(EventListener)が設定されているらしい

https://gyazo.com/4ce6bf9acf3897031b0410b9ba82d5bd

Scrapboxのページ遷移はこいつがいい感じにやってるっぽい

イベントリスナーを削除すると普通にページを再読込して遷移する

あ、そうかー、そういやReactってそんな感じのアレだったなkuuote.icon

全然ハックする必要なかった、最高〜

というかそれでハンドラの中で要素を探してたのか、完全に理解した

てかいい感じにページ遷移する函数、もう既にscrapbox-userscript-stdにあった気がする…Mijinko_SD.icon

URL fragmentの変更だけならlocation.hash = "xxxx";でいける

ちなみに再読込して遷移したいときはwindow.open()で十分

第2引数に"_self"を渡すと同じタブで遷移する

これもscrapbox-userscript-stdにいれようかなtakker.icon

window.open()自体は簡単に呼べるけど、いちいちencode処理とpath組み立てするのが面倒