CDN issues in SharePoint apps

When I am developing SharePoint apps, in general, I create my custom master page and place it inside the application. I would not say I had too much problems with this approach, until I needed to deploy the application on a SharePoint Online site where I could not disabled CDN due to insufficient rights on tentant. JQuery loaded from CDN simply makes some Bootstrap functionality not to work anymore.

My scripts were loaded using ScriptManager control, which is the classic way to load javascript files in web forms sites. As SharePoint tried to load additional files, the salvation was again JavaScript.


function pageLoad(sender, args) {



    let scripts = document.querySelectorAll('script')
    for (let k = 0; k < scripts.length; k++) {
        if (scripts[k].src.includes('ajax.aspnetcdn.com/ajax/jquery') === true) {
            document.body.removeChild(scripts[k]);
            jQuery.getScript(_spPageContextInfo.webAbsoluteUrl + '/Scripts/Framework/jQuery/jquery.js', function () {
                jQuery.getScript(_spPageContextInfo.webAbsoluteUrl + '/Scripts/Framework/bootstrap/bootstrap.js', function () {
                    // Do something here if needed
                });
            });
        }
    }

}

Don’t judge me if the code is not optimized as I found the solution about 10 minutes ago and this article is only written to give you an idea about how to remove jQuery from CDN. You can remove of course old Bootstrap and jQuery files before adding new ones or try to find a better loader, like require.js.

Advertisements