«
»

“defer” for IE7′s operation aborted error

IE has this "operation aborted" problem (MSDN article) when you try to change your parent while it's not ready.

This is the example they give that causes this error:

<html>
  <body>
    <div>
      <script>
        document.body.innerHTML+="sample text";
      </script>
    </div>
  </body>
</html>

Turns out you can easily solve it by just adding a defer attribute to the script. This works just fine:

<html>
  <body>
    <div>
      <script defer>
        document.body.innerHTML+="sample text";
      </script>
    </div>
  </body>
</html>

Demo page here

BTW, this operation aborted may bite you if you decide to append a script node to the body, like 

var js = document.createElement('script');
js.async = true;
js.src = "http://tools.w3clubs.com/pagr/1.sleep-2.js";
document.body.appendChild(js);

So it's not a good idea to append to the body like this when you don't control the page you're adding this code to, although document.body seems to be always available even when the page doesn't have a <body> tag

This entry was posted on Friday, September 9th, 2011 and is filed under The Blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to ““defer” for IE7′s operation aborted error”

  1. stoyan Says:
    September 9th, 2011 at 9:15 pm

    Via Paul Irish: An issue with IE9 and defer
    https://github.com/paulirish/lazyweb-requests/issues/42#issuecomment-1901803

  2. Mathias Bynens Says:
    September 10th, 2011 at 2:23 am

    Note that this is non-standard behavior — @async and @defer should be ignored for inline scripts as per the HTML5 spec. In other words, this hack is invalid HTML, but it won’t change the expected behavior in non-IE browsers. \o/

  3. JSPatterns.com » Blog Archive » The ridiculous case of adding a script element Says:
    September 10th, 2011 at 5:16 am

    [...] Exploring common JavaScript patterns and anti-patterns   « “defer” for IE7′s operation aborted error [...]

  4. John-David Dalton Says:
    September 10th, 2011 at 8:45 am

    Support for the “defer” attribute is inconsistent and buggy across browsers (more than just IE9 issues…). Using it for anything where you want consistency/stability is probably not a good idea. Common issues are scripts execute out of order or may execute after the DOMContentLoaded event has fired.

  5. Diego Perini Says:
    September 10th, 2011 at 7:21 pm

    The fact that browsers automatically insert a body tag even when no body tag is present in the HTML source doesn’t mean one can append elements to the body as soon as Javascript executes.

    That can happen only after DOMContentLoaded has notified that the HTML source has been completely parsed and the corresponding DOM nodes have been put in place.

    On IE browser (< 9) catching this moment is useful to ensures that DOM manipulations can happen as soon as possible and at the same time avoids the "Operation aborted" error you talk about !

    The "defer" attribute is a source of problems on IE itself ! Avoid it when you can !

    Diego

  6. The ridiculous case of adding a script element | JSSpy | The ultimate resource for JSSpy info. Edit this at (Settings > Tagline) Says:
    June 17th, 2012 at 3:53 pm

    [...] operation aborted may be solved with a defer, but maybe not in [...]

  7. “defer” for ie7′s operation aborted error | JSSpy | The ultimate resource for Javascript info. Says:
    July 21st, 2012 at 10:36 am

    [...] http://www.jspatterns.com/defer-for-ie7s-operation-aborted-error/ Share on  Twitter  Facebook  Google Reader  Ping.fm No Comments Related [...]

Leave a Reply