wikijs は「スクリプト」タグでスクリプトが埋め込める、ただしフロントエンドはVue.jsを利用している為、ちょっとした工夫が必要
通常の初期化ロジックは動かない
document.addEventListener('DOMContentLoaded', () => {}); // ダメ
windos.addEventListener('load', () => {}); // ダメ
window.addEventListener('wiki:pageLoaded', (event) => {}); // ダメ
MutationObserver を利用する、このオブジェクトは特定のDOMを監視する。Mutation（ミューテーション） とは 突然異変
//オブザーバーのインスタンスを生成
const observer = new MutationObserver((mutations, obs){
const el = document.getElementById('mycontainer'); // 特定のDOMを監視
if (el) {
obs.disconnect(); // 監視を終了
initializeMyScript(); // 初期化処理
}
}
// 監視を開始
observer.observe(document.body, { childList: true, subtree: true });
初期化できてない🥶
アクション！
var initializeMyScript = function() {
const mydiv = document.getElementById("txt_01");
mydiv.innerHTML = "初期化 OK 🌝";
const btn = document.getElementById('btn_01');
btn.addEventListener('click', function() {
mydiv.innerHTML = "クリック👽";
}, false);
};//);
const observer = new MutationObserver((mutations, obs) => {
console.log("-- search --");
const el = document.getElementById('mycontainer');
if (el) {
console.log("find");
// 目的のオブジェクトが見つかったら初期化
obs.disconnect(); // 2回目以降の実行を防ぐために停止
initializeMyScript();
}
});
observer.observe(document.body, { childList: true, subtree: true });
// 以下がつかえるといいが発火しない 🤔
window.addEventListener('wiki:afterPageLoad', () => {
console.log('wiki:afterPageLoad が発火しました');
});
WikiJSに添付することで / (ルート位置）で参照が可能。ただし初期化タイミングは MutationObserver で制御が必要
<script src="/d3.v7.min.js"></script>