Skip to content
This repository has been archived by the owner on Apr 13, 2021. It is now read-only.

DOMContentLoaded shim - domready.js #27

Closed
paulirish opened this issue Mar 1, 2011 · 13 comments
Closed

DOMContentLoaded shim - domready.js #27

paulirish opened this issue Mar 1, 2011 · 13 comments

Comments

@paulirish
Copy link
Member

Basically we need a micro-library for DOMContentLoaded-like event binding that works everywhere.

And it should be as small as possible.

And not suck.

One that we can trust.

@paulirish
Copy link
Member Author

@keithclark
Copy link

Diego has told me that he has an update for that script.

@ryanflorence
Copy link

@Integralist
Copy link

I'll throw my variation into the circle and see if anyone bites...

https://github.com/Integralist/DOMready

...it has had feedback from both @jdalton and @dperini to help catch out quite a few different scenarios so I think it's pretty robust

@Daniel15
Copy link

If the JavaScript for your site is relatively simple, you could just stick your JavaScript at the bottom of the page, and run it "inline" in the script file. I've done this on a few sites I've made. Avoids the need for a DOMReady function in a lot of situations :P

@mathiasbynens
Copy link
Member

@Daniel15 Depending on your script, that may trigger “Operation Aborted” errors in old IE: http://mths.be/ieoa In those situations you still need a DOMContentLoaded shim.

@Daniel15
Copy link

Daniel15 commented Feb 8, 2012

@mathiasbynens How likely is that to happen, though? I've never encountered that myself.

@mathiasbynens
Copy link
Member

@Daniel15 It happens when you use appendChild or innerHTML or trigger HTML parsing some other way on document.documentElement or document.body.

@Integralist
Copy link

Ps, thanks @Daniel15 for the pull request. Replacing the IIFE with a boolean coercion not only is cleaner syntax but better perfoming: Integralist/DOMready#1

@Daniel15
Copy link

Daniel15 commented Feb 9, 2012

@mathiasbynens Huh, that is interesting. I've used document.body.appendChild in an inline script before with no issues. I guess it's only certain situations that trigger the issue. Very weird.

@Daniel15
Copy link

Daniel15 commented May 9, 2012

I came across the "Operation Aborted" issue today. It only appears to happen when you try to modify a HTML element that's not the script tag's immediate parent. So, this could trigger it:

<body>
    ...
    <div>
        <script>
            document.body.appendChild(...) // :(
        </script>
    </div>
</body>
</script>

But this should work fine:

<body>
    ...
    <script>
        document.body.appendChild(...) // This works :)
    </script>
</body>
</script>

This is mentioned in a post on the IEBlog which confirms it somewhat:

The operation aborted dialog in Internet Explorer 7 is triggered by an HTML parsing exception that occurs when all the following specific conditions are met:

  1. The HTML file is being parsed
  2. Script is executing
  3. The executing script attempts to add, or remove an element from an unclosed ancestor in the markup tree (not including the script block's immediate parent element).

So as long as your script is directly above the </body>, it should work properly.

@paulirish
Copy link
Member Author

closing as https://github.com/dperini/ContentLoaded is it.

thx @rpflorence for the suggestion (1 yr ago :)

@ryanflorence
Copy link

Word.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants