SharePoint 2010: All about SharePoint JavaScript function _spbodyonloadfunctionnames
Concept
As you know in master and content page concept, the HTML ‘body’ is defined in master page and the content page defines only the html part that need to be rendered in the main placeholder in the master page. Now from a content page if you want to execute some JavaScript function on the body load event, the function needs to be invoked in body load event, to do that SharePoint defines an array in which all the JavaScript function which need to be called on body load can be added. When the body is loaded the onload event handlers executes each functions added in the _spBodyOnLoadFunctionNames array.
How it works
SharePoint 2010 uses lots of JavaScript’s to make rich user experience, in run time it loads many JavaScript’s functions and add them in the spBodyOnLoadFunctionNames to execute it on body load event.
It uses init.js file to handle such JavaScript’s. SharePoint adds the reference to init.js file on run time within the head tag. This reference must be added before adding any function in spBodyOnLoadFunctionNames.
Below is the code which shows how the init file reference is added once page is rendered
document.write('<script type="text/javascript" src="/_layouts/1033/init.js?rev=BJDmyeIV5jS04CPkRq4Ldg%3D%3D"></' + 'script>'); |
Below is one custom javascript function which I want to execute in body load event
<script type="text/javascript">
function ApplyFormat()
{
var meetingWPDIV = document.getElementById("MeetingWebparts");
if (meetingWPDIV != null) {
if (meetingWPDIV.innerText.indexOf("This Web Part was designed for use on a Microsoft Meeting Workspace") < 0) {
meetingWPDIV.style.display = "";
}
}
}
_spBodyOnLoadFunctionNames.push('ApplyFormat');
</script>
|
Here is how body tag of master page looks like which handles the method calls using init.js file and based on the functions added in spBodyOnLoadFunctionNames.
<body scroll="no" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master"> |
The above JavaScript function ApplyFormat() is added in _spBodyOnLoadFunctionNames array. Now when the page load will happen, on the body load event my function ApplyFormat() Will be executed
Some time we get error "JavaScript error on page -_spbodyonloadfunctionnames is undefined"
Error cause & solution
- Init.js file reference is missing , to resolve this, check the page source and make sure the init.js file reference is added In the page head tag
- The JavaScript function which is added in the array _spBodyOnLoadFunctionNames; is written before the init.js file reference added in the page.
This is most common mistakes, we add the custom scripts on the top in the head tag and as you know the reference to init.js file is also added in the head tag, so if the custom method added in array _spBodyOnLoadFunctionNames would not work because init.js file not yet referenced so it is not able to find the definition of _spBodyOnLoadFunctionNames and so gives script error on the page.
To resolve this error, check the page source and see the line number where init.js reference is added, and now see the custom JavaScript _spBodyOnLoadFunctionNames code line number, this should be used after the init.js reference is added.
- The body tag element is not properly defined, check the page source and make sure the body tag is properly defined as given above.