一種實現 MediaWiki 分頁面載入 JS 的思路

AurLemon發表於2024-08-29
JS

前言

MediaWiki 中使用 JavaScript 的辦法一般是把程式碼放在 MediaWiki:Common.js 頁面內。MediaWiki:Common.js 中的程式碼將並作用於所有頁面。

但如果只有部分頁面需要執行 JavaScript 程式碼，對於不需要的頁面來說是沒必要的，有沒有什麼辦法能分著載入呢？

思路

MediaWiki 官方文件提到了很多方法。importScript()和mw.config.get('wgPageName')就是其中之一。前者是引入 Wiki 頁面的方法，而後者是獲取當前頁面名稱的方法（如果站點同時支援繁體中文等其它中文變體，這個方法也是不受影響的）。

那麼，只需要把不同頁面的程式碼放到 MediaWiki 名稱空間下，如 MediaWiki:Script.js（MediaWiki 名稱空間只有管理員能編輯）。最後在全域性 JS 中檢測頁面名稱並引入對應的 JS 檔案即可！（可能有點奇怪的辦法，但是筆者自己的站點測試了很多次確實可行，這種辦法有點像動態匯入元件？）

// 只能引入 Wiki 頁面的方法 importScript('pageName')
importScript('MediaWiki:Script.js'); // 引入 MediaWiki:Script.js 頁面的 JS 檔案

更進一步地說，importScript()是透過在頁面內新增<script></script>標籤實現的，頁面名稱會被轉化成/index.php?title=MediaWiki:Script.js&action=raw&ctype=text/javascript的形式。透過查詢呼叫棧可發現，最終是被定向到 addScript 函式（見下）。

 function addScript(src, callback) {
    var script = document.createElement('script');
    script.src = src;
    script.onload = script.onerror = function() {
        if (script.parentNode) {
            script.parentNode.removeChild(script);
        }
        if (callback) {
            callback();
            callback = null;
        }
    }
    ;
    document.head.appendChild(script);
    return script;
}

實現

說回正題。只需要將以下程式碼新增到 MediaWiki:Common.js 即可。這裡我使用一個物件儲存著每個頁面對應的 JS 頁面名稱。

(function() {
	/**
	 * 載入頁面對應的指令碼
	 */
	const pageScripts = {
	    '首頁': 'MediaWiki:Mainpage.js',
	    '玩家列表': 'MediaWiki:List.js'
	};
	const currentPageName = mw.config.get('wgPageName');
	const scriptToImport = pageScripts[currentPageName];
	if (scriptToImport)
		importScript(scriptToImport);
})();

當然，直接使用 switch 或者 if 語句進行判斷也是可行的，只要能區分開不同的頁面即可。

相關文章