How to load Javascript from a webresource

Imagine an usecase where you can dynamically load a Javascript from the CRM webresources because it doesn’t need to be loaded on every single form load. Perhaps a polyfill to add missing browser functions or a Javascript library like jQuery. Here it is…

function loadJavascriptFromWebresource(strWebresourceName, async)
{
    //sync or async (default)
    if (async == undefined) { var async = true; }

    //build a new webrequest to get the content of the webresource by its name
    var req = new XMLHttpRequest();
    req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.0/webresourceset?" +
        "$select=content&$filter=name eq '" + strWebresourceName + "'", async);
    req.setRequestHeader("OData-Version", "4.0");
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    req.onreadystatechange = function ()
    {
        if (this.readyState === 4)
        {
            req.onreadystatechange = null;
            if (this.status === 200)
            {
                //get the result of the request
                var result = (JSON.parse(this.response)).value[0].content;

                //decode the base64 encoded result
                var script = atob(result);

                //make an indirect eval call to make it globally available
                window.eval(script);
            }
            else
            {
                Xrm.Utility.alertDialog(this.statusText);
            }
        }
    };
    req.send();
}

My personal usecase was to add a promises polyfill to the Internet Explorer. So, if you combine this post, my post about “Internet Explorer and promises” and you have a promises polyfill in your CRM webresources, you can use promises and do only load the polyfill in case the browser doesn’t support it.