[v2.1.0] ニコニ立体でonLoadイベントが発火しない事による影響 #36
Description
内容
ニコニ立体ではサイト内の移動（href="/works/td***" のようなaタグクリック時）でonLoadイベントが呼び出されない。
そうすると初期化処理が実行されないので不整合が起きる。
- デフォルト広告ボタンが上書きされない
- ドロワーを出してた場合出っぱなしになる
改善策
ページの移動を検知したら、ボタン上書きやドロワーを閉じたい。
Web APIにはURLの変更を検知するイベントが存在しないので、他の機能を組み合わせる必要がある。
ググったら履歴の変更イベントを利用するケースが多かった。
試したらいい感じに動いたけど、重複書き込みとかの問題が無いかは未確認。
コード
overlay_scripts.jsに以下を追記したらサイト内の移動を検知できた。
// ブラウザ側のwindowじゃないと各種イベントが見えない
const elm = document.createElement("script");
elm.innerHTML = `
// 履歴追加を検知
const originalPushState = window.history.pushState;
window.history.pushState = (state, title, url) => {
console.log("push state", url);
window.dispatchEvent(new window.Event("locationchange"));
return originalPushState.call(window.history, state, title, url);
}
// 戻る進むを検知
window.addEventListener('popstate', function (event) {
console.log("pop state", event.target.location.href);
window.dispatchEvent(new window.Event('locationchange'));
});
// カスタムイベントで受け取る
window.addEventListener("locationchange", (e) => {
console.log("location changed!")
//console.log(e);
})
`;
document.head.appendChild(elm);