如何将自定义全局 javascript 添加到 mediawiki答案

【问题标题】：How to add custom global javascript to mediawiki如何将自定义全局 javascript 添加到 mediawiki
【发布时间】：2015-04-27 17:57:19
【问题描述】：

如何将自定义 javascript 文件（比如 custom.js）添加到 mediawiki 安装中？

例如，如果我将 custom.js 放在文件夹 resources/lib/ 下，我如何让它在每个页面上加载？

我不会尝试将此作为扩展的一部分，我更愿意将我的更改保留在 LocalSettings.php。

【问题讨论】：

标签： javascript loading wikimedia

【解决方案1】：

正如 garryp 已经建议的那样，您可以将 JavaScript 代码放入 MediaWiki:Common.js。请注意，这不是一个文件，而只是一个您可以（作为管理员）在您的 wiki 上编辑的页面。例如，这里是MediaWiki:Common.js page on the English Wikipedia。

只有在启用$wgUseSiteJs 时才会加载来自 Common.js 的 JavaScript 代码。但是，这是默认设置，因此它应该可以工作，除非您通过在 LocalSettings.php 文件中添加像 $wgUseSiteJs = false; 这样的行来故意禁用它。

也可以使用ResourceLoader 从文件中加载 JavaScript 代码，但这有点复杂。不过，作为一个简单的示例，如果您的 MediaWiki 主目录中有名为 foo/bar.js 和 foo/baz.js 的文件，您可以通过将以下代码添加到 LocalSettings.php 文件中来加载它们：

// register a ResourceLoader module...
$wgResourceModules['custom.foo.whatever'] = array(
    'scripts' => array( 'foo/bar.js', 'foo/baz.js' ),
    // could e.g. add dependencies on core modules here
);
// ...and set up a hook to add it to every page
function addMyCustomScripts( &$out ) {
    $out->addModules( 'custom.foo.whatever' );
    return true;
}
$wgHooks['BeforePageDisplay'][] = 'addMyCustomScripts';

基本上，这种方法对扩展作者非常有用，他们可以根据需要使用它来加载 CSS 和 JS 代码。请参阅$wgResourceModules 和BeforePageDisplay 文档了解更多详细信息，包括其他模块选项（和core modules）。

【讨论】：

这太棒了！比 wiki 文档有用得多。我认为当您尝试放入各种 javascript/jquery 库时使用资源模块和钩子是必要的。

【解决方案2】：

使用 common.js 是个好主意。

另一种选择是将其定义为在 LocalSettings.php 中加载：

# Add onBeforePageDisplay function to BeforePageDisplay Hook
$wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay';

function onBeforePageDisplay( OutputPage &$out, Skin &$skin )
{
    $script = '<script type="text/javascript" src="https://example.com/javascript.js"></script>';
    $out->addHeadItem("itemName", $script);
    return true;
};

【讨论】：

【解决方案3】：

将代码放在你的wiki的“MediaWiki:common.js”页面中

http://www.mediawiki.org/wiki/Manual:Interface/JavaScript

另请参阅页面下方的自定义皮肤。

【讨论】：

Common.js 上的页面已被删除，您链接页面上的文档非常缺乏任何有用的示例。我真诚地希望您编辑您的答案，以包含您正在谈论的一两个示例。
您是否尝试过在文件系统中搜索 common.js？它存在吗？
我做到了。没有名为“Common.js”或“common.js”的文件。
如果您运行开发工具 F12 并查看页面正在加载哪些文件，它是否试图请求 common.js 文件并给出 404？据我了解，如果您想要一个简单的解决方案，您想添加到页面中的任何 JS 都可以放在 common.js 中。
想通了。没有 common.js 文件。有一个名为MediaWiki:Common.js 的页面仅供管理员使用。在 wiki 安装的搜索栏中输入它，然后使用您的代码编辑该页面。

【解决方案4】：

您可以将 javascript 代码放入 wiki 的“MediaWiki:common.js”页面中。

在一个全新的 wiki 上，您将创建此页面。因为它位于“MediaWiki”命名空间中，您可能会遇到权限问题。除非您是管理员用户，否则您无法编辑该页面。转到“Special:ListUsers/sysop”页面以查看管理员用户是谁，并确保您以其中之一的身份登录 (can't remember the password?)。一旦您克服了这些障碍并可以编辑“MediaWiki:common.js”...

您可以在其中放置任何 javascript，它应该为所有用户加载，无论他们的用户组或皮肤选择如何（因此名称为“common”）。更改后，请记住您的浏览器可能正在缓存内容。查看任何 wiki 页面并执行 ctrl+refresh，新的 javascript 应该会启动。

如果您想要加载的文件中有 javascript（在您的 wiki 文件中上传，或托管在外部站点上），您可以通过 ResourceLoader 执行此操作。 Ilmari Karonen 将如何做到这一点描述为对 LocalSettings.php 的编辑，但另一种方法...

您可以在“MediaWiki:common.js”页面中使用ResourceLoader。例如编辑页面并添加一行：

mw.loader.load( 'https://some.website.com/some-javascript.js' );

请参阅mediawiki.org ResourceLoader/Modules docs 中的“mw.loader.load”部分。

我们使用了一个 addOnloadHook 事件，该事件是为了在加载它之后进行，所以我们最终以 jQuery 方式进行：

jQuery.getScript( 'https://some.website.com/some-javascript.js',
  function() {
    addOnloadHook(function() {
      someJavaScript.thingToRunOnLoad();
    });
  });

【讨论】：