CODEWITHSUNDEEP
javascript
Raymond
Raymond

Reputation: 175

Chrome - <body onload=""> is not working

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...

Upvotes: 1

Views: 11603

Answers (6)

Saiyam
Saiyam

Reputation: 138

check if you have 2 onload events.

Upvotes: 0

Andy
Andy

Reputation: 121

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.

Upvotes: 0

Krasimir
Krasimir

Reputation: 13539

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.

Upvotes: 0

fardjad
fardjad

Reputation: 20404

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();
    }
});

Upvotes: 2

Jeroen Ingelbrecht
Jeroen Ingelbrecht

Reputation: 808

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>

Upvotes: 0

alex
alex

Reputation: 490423

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

Upvotes: 5

Related Questions