Geek Answers Handbook

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

I have a problem with the page where I am trying to get colorbox (a kind of lightbox for jQuery). This does not work, apparently due to document.body null in FireFox (3.5.3). This does not apply to Safari (4.0.3), where colorbox works.

Something that jumps at me is that (I am using Drupal 6) drupal added a script tag to set some JavaScript variables at the very bottom of the page, under the closing tags and html tags. Otherwise, I do not see the problem. Unfortunately, I have a lot of problems in not doing this. Could this be the reason that FF will have problems with the body?

Using colorbox sample files in Firefox works (and document.body defined there).

Is it possible to use jQuery to enrich the document.body property with something like $() , or do I need to keep knocking on drupal so as not to put the script tag outside the html tags (easier said than done)?

To clarify the value of document.body is null even after the page loads. Here's the capture of the Firebug console:

 >>> document.body null >>> $().attr('body') null
+4
source share
5 answers

The usual reason document.body is null since you are executing the script before the <body> (*) tag has been encountered. Without seeing the code, I can’t say for sure, but that would be a common reason. Move to where you placed the scripts.

(*: or another element, such as a <p> that the browser knows, cannot happen outside the body, in which case it quietly adds a <body> to fix the missing markup. The difference in the analysis of the usually defined in body tags may explain why Safari allows you to avoid this.)

Could this be the reason that FF will have problems with the body?

Not. This is a broken markup, and Drupal should not do this, but closing </body> does not stop document.body , referring to the corresponding DOM Node.

Is it possible to use jQuery to supplement the document.body document

No, document.body only reflects the same thing as document.getElementsByTagName('body')[0] , so trying to set it is unreasonable, and if you cannot find the body with document.body , jQuery cannot find it with $('body') .

+9
source

There should be no output from Drupal under the body tag. Check your topics page.tpl.php . The end should look something like this:

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

There should not be a print statement for the output of the $ closing variable, since this should be the last output of the content (but still inside the body).

+1
source

Aren't you using a different JS framework with jQuery? If so, have you taken care of how to load both libraries so that they remain compatible (order, compatibility fix ...)?

+1
source

Well, this is strange, but just adding this line at the bottom of my $(document).ready(function(){}); everything that broke the body is fixed:

  if(null==document.body){document.body = $('body')[0];}

But I need to take a closer look at why it broke in the first place, and also why it did not break in a safari.

0
source

Sorry this answer is not in jquery (I struggled with something similar over the last couple of hours with the prototype).

Basically, the best answer from bobince is quite useful, however you can reassign the body of the document whose trick finds it.

This is a prototype, but you realized

 body = $("content").ancestors().last().children[1];

If the content is a specific element on the page that you can find using regular selectors, any of them can be used, it does not really matter, from there you go to the top, and then down to the body element.

Hope this helps, for example, I said that my problem was only similar, not sure how it would suit you, but I hope this at least gives someone an idea.

0
source

More articles:


All Articles