Recently, I was trying to add some JS customisations to my SharePoint Online page (on Office 365) using this very technique. However, I came across some really weird issues. A little background, I was trying to use Mark Rackley’s awesome Hillbilly Tabs to get a few of my webparts to appear in tabs on the Home page of a sub site in my Site Collection. I was successful for the most part. The issues I was seeing was when I clicked the site logo on the top right hand side to navigate back to the home page. My JS would break all references for some reason.
This perplexed me quite a bit. I had double checked if the JS files were all stored in the correct location (I had stored them in the Site Assets library of the sub site in a JS folder) – /sites/teamsite/SiteAssets/js. Using dev tools (F12) in the browser, I saw that SharePoint was trying to reference the top level site (/sites/SiteAssets/js). When I navigated to the page using certain links, the JS loaded just fine without any issues and the tabs were appearing.
The Smoking Gun
- I tried using CEWP to embed the JS and also tried the script editor as well
- I tried embedding the JS directly into the page as well
- The URL of the page itself was either /teamsite or /teamsite/pages/default.aspx
- I was using relative URLs when referencing the JS file in my CEWP
- Managed navigation was turned on for the sites
After a bit of digging around and searching the web, I came across Waldek Mastykarz’s article about Managed Navigation and how it works. This made me realise that the references I was using in the JS files all needed to be absolute URLs and not relative. Once I changed all the JS, CSS and image file references from relative to absolute, everything started working just like normal