How to inject Jquery Code in SharePoint (2013 and 2016) to be executed on every SharePoint Page without modifying the master page?

Question

What I should do to inject Jquery Code into SharePoint that will be executed on every SharePoint Page without editing the masterpage.

Is there a specific way to use Jquery to avoid any conflict with the existing javascript code in SharePoint?

Thanks,

Regards,

Arioule

Answer 1

I recommend UserCustomActionConfigPage from John Liu. You can download the file from GitHub.

Basically you add the config-page.aspx file to your site assets or style library and then you can use it to add css and js files to either your entire site collection or just the individual site.

We have used this with 2013 on prem. I don't know about 2016, but it says that it is compatible with it.

Answer 2

You can use the below code to add custom action to site..I have added alert.js using custom action to site

<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script>
var clientContext = new SP.ClientContext();
var site = clientContext.get_web(); //If list is in different site then use relative url instead of get_current
var UserCustomActions = site.get_userCustomActions();
newUserCustomAction = UserCustomActions.add();
newUserCustomAction.set_location('ScriptLink');

// my tool always attach script from ~sitecollection/SiteAssets/ 
// you can use subfolders
// but if you want to use Style Library or some other
// folder you'll have to change this.
newUserCustomAction.set_scriptSrc('~SiteCollection/SiteAssets/alert.js');

//name or sequence details can also be used in case of deleting or updating the script from master page
newUserCustomAction.set_sequence(10);
newUserCustomAction.set_title('New Alert');
newUserCustomAction.set_description('Global Alert');
newUserCustomAction.update();
clientContext.executeQueryAsync(Function.createDelegate(this,
this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

//success function
function onQuerySucceeded(sender, args){
alert('New Support files added to Site.\n\nRefresh the page.');
}

/*error function */
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Reference : unable-to-unregister-usercustomactions-added-at-location-scriptlink-using-csom

Answer 3

You can use Delegate Controls to add jQuery to each page of SharePoint without modifying it.There are multiple Delegate Controls available OOB in SharePoint Master page like the one below. You can over ride them using a webpart to inject jQuery into master page without modifying it.

<SharePoint:DelegateControl runat="server" 
      ControlId="AdditionalPageHead" 
      AllowMultipleControls="true"/>

Delegate controls are particularly useful in SharePoint when you want to add functionality to all pages within your site without changing the master page. For example, if you want to add an external JavaScript library (such as JQuery) to every page, you can do this easily by registering a delegate control. An example of this approach can be seen here

You can also refer these examples :

Example 1

Example 2