Last modified: 2011-04-20 21:22:34 UTC
Adding a CSS file via mw.loader.load causes Internet Explorer (tested: IE 8.0/Win XP) to reload the page telling you a serious problem occured. To reproduce enter javascript:void(mw.loader.load('http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css', 'text/css')) as adress.
Going to javascript:void(mw.loader.load('http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css','text/css')); doens't do anything weird for me in IE7 and IE9 beta. I don't have IE8 here tho.
I found this bug in jQuery's bug tracker: http://bugs.jquery.com/ticket/4230 The solution there seems to work: $( 'head' ) .append( $( '<link />' ) .attr( 'rel', 'stylesheet' ) .attr( 'type', 'text/css' ) .attr( 'href', modules ) )
Well, mediaWiki.loader.load uses.. $( 'head' ).append( $( '<link rel="stylesheet" type="text/css" />' ).attr( 'href', modules ) ); So, are we saying that using some of the attributes in the initial HTML string is the difference between IE crashing or not?
(In reply to comment #3) > Well, mediaWiki.loader.load uses.. > > $( 'head' ).append( $( '<link rel="stylesheet" type="text/css" />' ).attr( > 'href', modules ) ); > > So, are we saying that using some of the attributes in the initial HTML string > is the difference between IE crashing or not? Well, not by definition. The difference is that this: $( '<link />' ) Will cause jQuery's quick regex to pick it up and use document.createElement, whereas anything more complicated makes it append it to a <div> and get the inner child(ren). http://api.jquery.com/jQuery#jQuery2 states: * "When the HTML is more complex than a single tag without attributes [..] the actual creation of the elements is handled by the browser's innerHTML mechanism. In most cases, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in. " * "When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided." * "To ensure cross-platform compatibility, the snippet must be well-formed." This was also the cause of a few bugs in the makeCollapsible plugin which used "<span></a></span>" to quickly create a wrapped anchor tag (works fine in WebKit-browsers), but goes bad in (some) IE versions. I think Internet Explorer wants link-tags to be closed instead of self-closing. Either way, the solution is by using the native createElement function. In other words (as, in a way, Trevor already said): "[attributes] in the initial HTML string is the difference between IE crashing or not". Yes :-D
Thank you for the excellent input! This is an incredibly easy fix, has anyone verified this actually prevents IE from crashing?
I can confirm (as of r86333): a) loading CSS with mw.loader.load crashes IE 7 & IE 8 (tested in XP) b) the solution (comment2) works and does not crash IE 7 oder 8
Fixed in r86548. Used the new method as of jQuery 1.4 to populate attributes instead of chained .attr() calls. Should fix IE problems and it's slightly faster as well.
