1

I have several pages and instead of including my JavaScript in each page and then updating/amending the script in each page which is time-consuming, I just want each page to pull the script from a remote JS file so that I can only update that one file.

At the moment I have something like this embeded in each page (including H1 tag):

<script type="text/javascript" src="https://xxx.sharepoint.com/Style%20Library/Scripts/jquery132.min.js"></script>
<script type="text/javascript" >
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery('#WebPartWPQ1').hide();
jQuery('#WebPartWPQ1_ChromeTitle').click(function()
{
jQuery(this).next('#WebPartWPQ1').slideToggle(500);
});
});
</script>
<h1>Heading Title</h1>

How do I get my custom scripts remote rather than embedded in each page?

3

By exactly the same mechanism you are using to pull in the jQuery library. If you take all that code you have in your script block there, and put it in a file called, for example, myScript.js, and you upload that script file to a document library somewhere (maybe the same place you have the jQuery file?), you can make the embedded HTML:

<script type="text/javascript" src="https://xxx.sharepoint.com/Style%20Library/Scripts/jquery132.min.js"></script>
<script type="text/javascript" src="https://xxx.sharepoint.com/Style%20Library/Scripts/myScript.js"></script>
<h1>Heading Title</h1>

If you are not putting your script file in the same place as the jQuery file, then obviously make the src URL for the link to your script file point to the correct URL for your script file.


Addressing your comment - to add HTML in a similar way, you can create an HTML file with no html, head or body tags, just assume what's in that file will be inside the body, add that to a library somewhere in SharePoint, then put a Content Editor Web Part on the pages where you want that HTML, and use the Content Link property of the CEWP to link back to your HTML file.

So for instance, you could put your two script links and your one h1 and make a three line HTML file myMarkup.html. Upload that to, for instance, a folder called "Html" in the Style Library of your site. Then put a CEWP on the pages where you want to load those scripts and HTML, and in the Content Link property of the CEWP, put the URL to the HTML file: https://xxx.sharepoint.com/Style%20Library/Html/myMarkup.html

Content Link property

That will inject your HTML as-is into the page.

  • Hi Dylan, I should've said that I actually tried this, but it wasn't working at first. Now I checked and made sure both .js files are published and it works :) – Maciek Dec 20 '18 at 21:11
  • How can I add HTML code in the same way? – Maciek Dec 20 '18 at 21:18
  • 1
    @Maciek updated my answer to address your comment. – Dylan Cristy Dec 20 '18 at 22:33
  • 1
    @Maciek you can also have src attribute use relative URLs. You can put src="/Style%20Library/Scripts/myScript.js" instead of src="https://xxx.sharepoint.com/Style%20Library/Scripts/myScript.js"... In order to include html into your page take a look at this link. – KGlasier Dec 20 '18 at 22:57
  • Thanks @DylanCristy for your help. I was wondering if there was another way instead of using <iframe> tag. By your description, it works pretty much the same as iframe ;), thanks – Maciek Dec 27 '18 at 15:03
2

You didn't mention the version of SharePoint you are using. But, in SharePoint 2010/13/16, you can create custom page layout and add references to your custom scripts in your page layout.

Then create your sharepoint pages using that page layout and you will have access to that custom script in all your pages.

Sources:

Create A Custom Page Layout in SharePoint.

  • Thanks, I will try this. I'm using SharePoint Online. – Maciek Dec 20 '18 at 21:12

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.