I am mid-way through development of a corporate intranet that will be hosted in SharePoint Online. For this reason, we are restricted to using sandbox solutions. One of the last "gotchas" that I need to resolve however, is how to dynamically register JavaScript files from within my web parts.
After a lot of research, there seems to be three decent ways of achieving this which I've outlined below, each with their own list of pro's and con's. Can anyone assist in guiding me down the best path here? This approach will be used across a dozens of web parts within our system, so it's important we get this stuff right first time.
Note: There are certainly more ways to dynamically inject files into the page from within a sandboxed web part, but the methods below are the only ones that I'm aware of that reslove the issue whereby if there are multiple instances of the same web part on the page, then the JavaScipt or CSS depenedies will still only be loaded once.
CustomAction's ScriptLocation property
Pro's:
- Uses pure OOTB functionality :)
- Approach can be used for both CSS and JavaScript files
Con's:
- UPDATE 5-Nov: Registers the script on every page in the site (not just the page where the web part has been added)
ECMA Script
Info: http://blog.mastykarz.nl/dynamically-loading-javascript-sandbox/
Pro's:
- Uses pure OOTB functionality :)
- Waldek (the author) is a noted "big player" on the SahrePoint scene -- I'd basically trust the guy no matter what he told me to do!
Con's:
- Can't be used for registering CSS (ideally, I'd like to use the same approach for all my dependencies -- regardless of their file type)
- It seems the most difficult and complex of the three solutions to implement (this could give a lot of room for error when there are lots of developers working on a project)
AJAX Script Loader
Pro's:
- Uses code written by Microsoft (therefore it can be treated as "tested and trusted")
Con's:
- Can't be used for CSS
- It seems a bit leftfield, i.e. it is a single piece of an AJAX library in beta that actually targets .NET 4.0 and doesn't come packaged OOTB with SharePoint :(
UPDATE 5-Nov: Custom JavaScript Function
Info: http://github.com/eirikb/sppreload -- kudos to @eirikb for adding this suggestion. It uses the CustomAction's ScriptLocation property to call a custom JavaScript function (passing in the URL of the .js or .css file you want to load). The function determines if the file has already been loaded, and only if not, then it dynamically creates the node in the page head element.
Pro's:
- Can be used for CSS and JavaScript
Con's:
- Doesn't leverage any OOTB functionality, so there's no assurance against bugs etc.
And to pre-empt the flood of answers that won't take into consideration the limitations of the sandbox, please be aware that the use of delegate controls is forbidden, as are the ScriptLink and CssRegistration controls and the Page.RegisterClientScriptBlock method. Also, the CustomAction.ScriptSrc property is hard-wired to retrieve scripts from the _layouts directory which we unfortunately don't have have access to.
Thanks in advance for your help!