Jump to content

Topic on Talk:ResourceLoader

Conditional script inclusion (e.g. < if lt IE 9 > )

3
MWJames (talkcontribs)

My apologies if I failed to see some notes about conditional script inclusion but in a case a browser requires a pre-IE 9 script (add an additional JS script only for that particular situation), how is one to work around this problem with the ResourceLoader.

For example:

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->

Register a separated module but it should only be loaded in case the necessary conditions are due to (pre-IE 9).

$wgResourceModules['ext.srf.excanvas'] ...

Which method in the RL/JS could be used to load this module so that the condition [if lt IE 9] is met?

Krinkle (talkcontribs)

This is currently not supported by ResourceLoader. However MediaWiki in general (the OutputPage class that builds the page output) does support it. You may use one of the following two methods:

  • To load a complete module: Use OutputPage::addScript in combination with Html::inlineScript. For example:
$excanvasLoad = Html::inlineScript(
	ResourceLoader::makeLoaderConditionalScript(
		Xml::encodeJsCall( 'mw.loader.load', array( 'ext.srf.excanvas' ) )
	)
);
$out->addScript( '<!--[if lt IE 9]>' . $excanvasLoad . '<![endif]-->' );
);
  • To load a single css file (raw, without minification and other ResourceLoader processing): Use OutputPage::addStyle( url, media, condition ) where url points to a file directly. For example:
$out->addStyle( 'modules/IE70Fixes.css', 'screen', 'IE 7' );

Alternatively you coud use mw.loader.using( 'ext.srf.excanvas', function callback() { .. } ); from within your main module code, to load it on-demand when you need it and the browser is IE. Like this

-- modules/ext.James.display.js
var james = {
  init: function () {
    $(document).ready( function () {
      /* do canvas stuff */
    });
  };
};

var p = $.client.profile()

if ( p.name === 'msie' && p.versionNumber < 9 ) {
  mw.loader.using( 'ext.srf.fallback', james.init );
} else {
  james.init();
}
Reply to "Conditional script inclusion (e.g. < if lt IE 9 > )"