1

I know

"Onload executes when DOM fully loaded.This means it is executed after end of your page. This is useful when you want to do some task when document is fully loaed."

but why these code don't work in chrome(spBodyOnLoadWrapper is a function defined in "init.debug.js" , this function was not called ):

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr">
    <head>
   <script type="text/javascript">
    document.write('<script type="text/javascript" src="/_layouts/1033/init.debug.js?rev=Cn3X2qRiBI8U52EFeStGwg%3D%3D"></' + 'script>');
     </script>
    </head> 
    <body scroll="no" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master">
    </body>

These HTML is generated by a Microsoft product named "SharePoint 2010", ugly, and not "best practices" , but i have to make it work in chrome...

2
  • 1
    Ouch... document.write to include a script? seriously? Not even inside <script> tags either... Commented Aug 27, 2013 at 7:23
  • Looks like there's no reason to use document.write(). Why not add a simple script tag instead?
    – Teemu
    Commented Aug 27, 2013 at 7:29

6 Answers 6

5

document.write() is JavaScript code, so it must be included within a script element.

0
2

I see a few mistakes/bad practices in your HTML:

First of all, you must wrap the document.write statement in script tags,

Second, using document.write is not necessary (and should be considered as a bad practice). You can simply add the script to your page by placing the script tags in head or body:

<script type="text/javascript" src="/_layouts/1033/init.debug.jsrev=Cn3X2qRiBI8U52EFeStGwg%3D%3D"></script>

If you want to specify the script source dynamically, you can create a script element, set its source and add it to your document:

<script type="text/javascript">
    var headElement = document.getElementsByTagName('head')[0],
        script = document.createElement('script');
    script.setAttribute('src', '/_layouts/1033/init.debug.jsrev=Cn3X2qRiBI8U52EFeStGwg%3D%3D');
    script.setAttribute('type', 'text/javascript');
    headElement.appendChild(script);
</script>

Instead of using onload attribute, it's better to add an EventListener for load event with JavaScript:

window.addEventListener('load', function () {
    if (typeof(_spBodyOnLoadWrapper) != 'undefined') {
        _spBodyOnLoadWrapper();
    }
});
1
  • These HTML is generated by a Microsoft product named "SharePoint 2010", ugly, and not "best practices" , but i have to make it work in chrome...
    – Raymond
    Commented Aug 27, 2013 at 7:49
0

Just put the script tags in the head without document.write. Secondly, I suggest you put the code which you want to execute in a separate function as well in your head section but anywho, below example might work as well (see also JS Bin):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr">
<head>
<script type="text/javascript" src="/_layouts/1033/init.debug.js?rev=Cn3X2qRiBI8U52EFeStGwg%3D%3D"></script>
</head>

  <body scroll="no" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined'){ _spBodyOnLoadWrapper();}" class="v4master">
</body>
0

I'll suggest to use the following script:

window.onload = function() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.onreadystatechange = function () {
        if(this.readyState == 'complete') {
            if (typeof(_spBodyOnLoadWrapper) != 'undefined') {
                        _spBodyOnLoadWrapper();
                    }
        }
    }
    script.src = '/_layouts/1033/init.debug.js?rev=Cn3X2qRiBI8U52EFeStGwg%3D%3D';
    head.appendChild(script);
}

The usage of document.write is not a good idea. The code above dynamically adds a new script tag into the header of the current page. It detects when this script is loaded and executes your function.

11
  • I didn't down-vote, but: Wjat is helper supposed to be... and how is the body.onload event supposed to fire, if the script isn't added until after the window.onload event fires? Commented Aug 27, 2013 at 7:25
  • That's the idea. You don't need to use bodu.onload at all. Window.onload and later .onreadystatechange are the things which you need. However, as far as I can see the other people here like the answer below.
    – Krasimir
    Commented Aug 27, 2013 at 7:32
  • If you use the code with onload inside the body tag you will probably need another js function, because later you may want to add another library. Also, I found that having script in html tags is not the most elegant solution.
    – Krasimir
    Commented Aug 27, 2013 at 7:33
  • I never go for in-html-js, don't get me wrong... I fully understand your code, but I'm not sure if you do. it feels like a blind copy-paste, mainly because you don't explain anything, and left this line in: script.onload = helper;, which, with your code as it stands, won't work (helper is undefined) Commented Aug 27, 2013 at 7:36
  • :) I forgot to remove it. Of course it is copy-paste from somewhere, but it is a code that I used a lot in my projects and I know what it does :). I disagree that I didn't explain what is the purpose of it. Just check the text below the snippet. Isn't it enough?
    – Krasimir
    Commented Aug 27, 2013 at 7:39
0

I ran into this problem and tried the solutions suggested here but they didn’t work. Some more searching indicates that this is a bug in Chrome that appears to go back at least to 2009:

http://productforums.google.com/forum/#!topic/chrome/7VIpByhmU3U

The issue is that body.onload (and also window.onload) are firing before the web page has completely loaded, apparently in my case because I’m loading large images whose time-to-load varies with net traffic. The work around is to put your JavaScript into the page after any referenced HTML, but before the end tag:

<script type="text/javascript">
     if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();
</script>

This also had the effect for me of producing a substantially more immediate update of the page content in the other browsers (Firefox, Safari) where the bug doesn’t occur.

0

check if you have 2 onload events.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.