Ten Tonne Baby!

Where's Mama?

Archive for the x-browser tag

• Testing IE rendering

  I have to admit until recently I’ve been using virtual machines for testing rendering in different versions of IE – just came across IETester which lets you open new tabs running the rendering engine from different versions. You probably know all about this already, but it was new to me. Last time I looked into this it was still a major headache.

  I’d really recommend taking a look if you’re doing any client-side dev work.

  Update: There isn’t a huge amount of information about exactly how this is implemented and whether you can solely rely on this for testing rendering + javascript of a major application. The closest I could find was this from the author on a forum… ‘I am hooking win32 functions to override standard calls and launch custom versions of IE instead of standard version.’ Everything I’ve tried so far has been accurate, but I think better documentation would really help adoption.

  There may be info I haven’t found in the forums.

  Posted:

  February 26, 2009 @ 13:22

  Categories:

  Development

  Tags:

  rendering, x-browser

  Comments:

  2 comments so far

• Added object tag to page via DOM methods – IE chaos

  I’ve been working on a widget project that involves Flash and Javascript, and came across some very strange behaviour in IE6 / 7. The object tag to render the flash movie is dynamically added to the page at runtime using standard DOM methods – document.createElement, setAttribute, appendChild etc. Life was wonderful until I opened Internet Explorer, which hangs with what looks like a request for a file with no timeout (progress bar moving very slowly but never completing). This is identical behaviour to how IE behaves when the location of the SWF is invalid.

  The markup

  The markup I was generating was based on Flash Satay. Including this as static markup in a page works fine. Simple example below…

  <object type='application/x-shockwave-flash' data='test.swf' width='420' height='155'>

      <param name='movie' value='test.swf' />

  </object>

  DOM approach that chokes IE

  The following approach causes IE to choke…

  <script type="text/javascript">

      var object = document.createElement('object');

      object.setAttribute('type', 'application/x-shockwave-flash');

      object.setAttribute('data', 'test.swf');

      object.setAttribute('width', '100');

      object.setAttribute('height', '100');

      var param = document.createElement('param');

      param.setAttribute('name', 'movie');

      param.setAttribute('value', 'test.swf');

      object.appendChild(param);

      document.body.appendChild(object);

  </script>

  The solution / workaround

  For some reason if the object tag + params are parsed at the same time everything works fine, so the solution involves using the alternate approach to manipulating the DOM – innerHTML. This wouldn’t have been my first choice given the situation, but it seems to be the only way to get this working. A version that works in IE…

  <script type="text/javascript">

      var fragment =

          "<object type='application/x-shockwave-flash' data='test.swf' width='100' height='100'>" +

              "<param name='movie' value='test.swf' />" +

          "</object>";

      var container = document.createElement('div');

      container.innerHTML = fragment;

      document.body.appendChild(container);

  </script>

  This achieves the same end result – a DOM element node that can be inserted anyway you wish, but avoid the problem in IE.

  Posted:

  February 26, 2009 @ 10:51

  Categories:

  Development

  Tags:

  dom, flash, IE, javascript, x-browser

  Comments:

  2 comments so far