Load JavaScript from external file in a web part

Question

In order to hide the title of the page, I have placed JavaScript in a Script Editor presently. I want to add this functionality to few other pages.

Is it possible to save this JavaScript in an external JS file and load it.

Answer 1

Yes the javascript code can be placed in an external file and can be referenced from the Script Editor web part using script tage. Suppose, I have a site with Url: http://aissp2013/sites/XYZ. And Suppose I add the JavaScript file named Test.js in a Document Library named "ABC". Then in the script editor web part, JS file can be referenced like this:

<script type="text/javascript" src="../ABC/Test.js"></script>

Answer 2

Saving the JavaScript at a centralized location and accessing it is a very good practice. You can do this by creating a JS File in the Style Library.

Navigate to Style Library and create a folder calling it JS. Now, add a empty JS file to this folder. You can add all your code here.

Once you are done, include the JS file in all the pages where you want to use the script and you are done. Use the code given below to include the JS file on ASPX page:

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" language="javascript" 
        src="JS URL">
</script>    
</asp:Content>

Answer 3

You can save it into a file under any document library. Let's say you have saved in Site Assets library and your js file name is hideTitle.js. So your <script> tag becomes

<script src="/Site Assets/hideTitle.js"></script>

Now you can put this into your master page so that all page will be affected OR you can put this inside Script Editor also.

I would like to put this script in master page. But It may not need for all pages. In that case declare an array that contains where you need to execute this script.

var hiddenTitlePages = ["XXX.aspx", "YYY.aspx", ..., "Home.aspx"];

Now check your current page if it exists in this array. If it exists, then execute your script.

var serverRequestPathArray = _spPageContextInfo.serverRequestPath.split('/');
var currentPage = serverRequestPathArray[serverRequestPathArray.length - 1];

if (hiddenTitlePages.indexOf(currentPage) > -1) {
// Write your others code here
}

Benefits: In Script Editor, you have to add this script every time for every page. If you consider master page, then every time, you have to modify the hiddenTitlePages array only.

Answer 4

Try the below steps

<script type="text/javascript" src="../Style%20Library/HideTitle.js"></script>

1. Create a JavaScript file
2. Upload the file to Script library in the site
3. Open the required page and add a Script editor webpart
4. Use the above code to refer the JavaScript file in the page