Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is document.body == null in Firefox but not Safari

I have a problem with a page where I am trying to get colorbox (a kind of lightbox for jQuery) working. It doesn't work apparently due to the document.body being null in FireFox (3.5.3). This is not the case in Safari (4.0.3) where the colorbox works.

Something that jumps out at me is that (I'm using Drupal 6) drupal has appended a script tag to set some JavaScript variables at the very bottom of the page, below the closing body and html tags. Otherwise I don't see a problem. Unfortunately I'm having a lot of trouble getting it not to do that. Could it be this that's causing FF to have issues with the body?

Using colorbox's example files in Firefox does work (and the document.body is defined there).

Is there any way I could use jQuery to refill the document.body property with something from $() perhaps, or should I keep banging at drupal to not put a script tag outside the html tags (easier said than done)?

To clarify the document.body is null even after the page is done loading. Here's a Firebug console capture:

>>> document.body
null
>>> $().attr('body')
null
like image 967
dlamblin Avatar asked Oct 27 '09 13:10

dlamblin


People also ask

Why is document body null?

body object, it is most likely because the body has not been defined yet. If document. body is null, you most likely need to execute your code in the window. onload function.

What does document body do?

document. body is the element that contains the content for the document. In documents with <body> contents, returns the <body> element, and in frameset documents, this returns the outermost <frameset> element.


2 Answers

The usual reason document.body is null is because you're executing script before the <body> tag(*) has been encountered. Without seeing code I can't say for sure, but that'd be the usual reason. Move where you've put the scripts.

(*: or another element such as <p> that the browser knows can't occur outside of a body, in which case it silently adds a <body> to fix up your missing markup. A difference in parsing of certain usually-in-body-tags might explain why Safari allows you to get away with it.)

Could it be this that's causing FF to have issues with the body?

No. It's broken markup and Drupal shouldn't do it, but closing the </body> doesn't stop document.body referencing the proper DOM Node.

Is there any way I could use jQuery to refill the document.body

No, document.body is only reflecting basically the same as document.getElementsByTagName('body')[0], so trying to set it is not sensible, and if you can't find a body with document.body, jQuery won't be able to find it with $('body') either.

like image 90
bobince Avatar answered Oct 02 '22 16:10

bobince


There should not be any output from Drupal below the body tag. Check your themes page.tpl.php file. The end should look pretty much like this:

<!-- BEGIN closure: must always be last element in body -->
    <?php print $closure; ?>
<!-- END closure -->

</body>
</html>

There should be no print statement below the output of the $closure variable, as this needs to be the last content output (but still within the body).

like image 25
Henrik Opel Avatar answered Oct 02 '22 16:10

Henrik Opel