{"id":1293,"date":"2011-07-17T06:39:19","date_gmt":"2011-07-16T22:39:19","guid":{"rendered":"http:\/\/blog.lolyco.com\/sean\/?p=1293"},"modified":"2011-07-17T06:41:59","modified_gmt":"2011-07-16T22:41:59","slug":"ie8-javascript-not-running-from-script-element-in-head","status":"publish","type":"post","link":"https:\/\/blog.lolyco.com\/sean\/2011\/07\/17\/ie8-javascript-not-running-from-script-element-in-head\/","title":{"rendered":"IE8 javascript not running from script element in head"},"content":{"rendered":"

After staring at other people’s solutions to this problem for a day or so, I finally realised what I was doing wrong and thought I’d better share it, just in case you also fail to see for several hours how you caused the problem. I have a page that works nicely in Firefox, Chromium, Opera etc and fired up an old copy of WinXP on VirtualBox to check the site worked okay in IE. I wanted to show it to someone whose website was obviously written by and for users of Microsoft software, so was gutted to see a horribly broken page or, when I tried various hacks to see what was happening, no page at all.<\/p>\n

To cut a long story short, the problem was caused by me emitting a SCRIPT element in the document’s HEAD that looked like this:<\/p>\n

<script src="\/static\/js\/shipping-methods.js" type="text\/javascript" \/><\/pre>\n
when it should be this:<\/p>\n
<script src="\/static\/js\/shipping-methods.js" type="text\/javascript"><\/script><\/pre>\n
The former (empty element) works just fine in every browser I have but<\/em> IE8, the latter (block element) works in every browser including<\/em> IE8.<\/p>\n
Now that I’ve figured out what the problem is, it’s easy enough to find a web-page with the answer (and several comments recalling the pain this problem caused for them) such as “Why don’t self-closing script tags work?” at Stack Overflow<\/a>. Reading through the comments – far enough – makes me think “D’oh! Of course!”. My site’s pages are served as XHTML unless the user-agent is IE, in which case my XHTML-generating code includes these headers:<\/p>\n
X-XHTML-HTML-Hack: http:\/\/www.w3.org\/TR\/xhtml-media-types\/#media-types\r\nContent-Type: text\/html; charset=UTF-8<\/pre>\n
The problem is that the self-closing element (or whatever you like to call it – I have Java classes that generate such things with names varying on a theme of EmptyElement, but I see pages that suggest that’s something different) is valid in XHTML but not in HTML. IE gets content from the server which it is told is HTML and silently fails to parse the self-closing element, trashing the page in the process.<\/p>\n
So now I know. Beware the self-closing script element in XHTML pages sent with the text\/html kludge to Microsoft browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"
After staring at other people’s solutions to this problem for a day or so, I finally realised what I was doing wrong and thought I’d better share it, just in case you also fail to see for several hours how you caused the problem. I have a page that works nicely in Firefox, Chromium, Opera […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,20,64],"tags":[44,82,41,62,105,57],"class_list":["post-1293","post","type-post","status-publish","format-standard","hentry","category-broken","category-fixed","category-useful","tag-brokenfixed","tag-html","tag-http","tag-javascript","tag-software","tag-web"],"_links":{"self":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts\/1293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/comments?post=1293"}],"version-history":[{"count":5,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts\/1293\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/posts\/1293\/revisions\/1297"}],"wp:attachment":[{"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/media?parent=1293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/categories?post=1293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.lolyco.com\/sean\/wp-json\/wp\/v2\/tags?post=1293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}