Summary:

Adding an onload event via a Custom Content script may result in a CRM page remaining blank after loading. This is caused by the script replacing the onload events.

Symptoms:

A customer added a Custom Content script in the following format:

<script>
window.onload = function(){

    alert("The window hs loaded!");

}
</script>

On navigating the screen containing the script, the screen failed to load.

Since the release of v7.2 and 2013 R1, CRM has several onload events attached to the screen body. A custom content script that fails to account for these events may replace them. The recommended approach is to attach an additional onload event to a screen, rather than set window.onload.

More information:

If you examine the page source for an uncustomised screen in v7.2, you will see the following:

<BODY onload="SageCRM.prepareDiv.afterLoad();  SageCRM.webTriPage.webTriPageJQueryOnLoad(); SageCRM.webTriPage.LoadComplete(''); " onresize="SageCRM.prepareDiv.SetDivSize(true)" onunload="SageCRM.webTriPage.webTriPageOnUnload(); ">

Using the browser’s debugging tools, we can list what onload events are currently attached to a screen. Here’s the default, from an uncustomised copy of v7.2 (it’s much the same on Cloud):

default-onload-events 

When the custom script listed above is added, and we check for an onload event, we will see the following:

onload-event-custom 

You can see that the default onload functions have been replaced. This prevents the page from being displayed correctly after it loads. The recommended process for adding onload events is by attaching an additional onload event to a screen.

If you examine any of the workaround scripts provided by the Level 3 support team, you’ll notice that we also use the attachEvent / addEventListener function, but in a slightly different pattern. Usually, it will be one of these:

Classic Javascript, Internet Explorer-only:

window.attachEvent("onload", function () {

    // IE only, by far the most common one used
    alert("This works in Internet Explorer!");
});

Classic Javascript, for browsers using the Webkit rendering engine:

window.addEventListener("load", function () {

    // Webkit-based browsers - Chrome, Firefox, Safari
    alert("This works for Webkit brosers!");

}, false);

When CRM v7.1SP2 was released, cross-browser support was included for the first time. In order to facilitate the writing of scripts that would work in all browsers, a copy of the jQuery Javascript library was included within Sage CRM:

$(document).ready(function () {

    // jQuery - cross-browser compatible, CRM v7.SP2 and later
    alert("Now we're using jQuery!");

});

For CRM v7.2, a new client-side API was introduced. The aim here was to combine the cross-browser functionality of jQuery with a set of simplified CRM-specific functions. This code snippet does the same thing as the previous example, but it’s easier to remember, and therefore easier to learn. The functions included in the client-side API will be supported going forward, regardless of other changes in the browser, or the CRM DOM. The client-side API is also available in the current Cloud release.

crm.ready(function(){

    // Client-side API (cross-broser, CRM 7.2 and later)
    alert("We're using the Client-side API!");

});

All of the above do much the same thing. They attach an additional onload event to the window. They don’t replace any onload events that already exist. There are two benefits to using an anonymous function within the script.

1) It limits the scope of any variables that you’ve declared.
2) You’re not going to encounter any collisions with existing function names.

When writing onload scripts for CRM, we’d recommend that you either use the jQuery or client-side API formats, if possible.