Adding JavaScript and cascading stylesheet references to a master page_SharePoint 2013 WCM Advanced Cookbook-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

Adding JavaScript and cascading stylesheet references to a master page

Most of our customizations to the master pages require some CSS or JavaScript (JS) references. CSS and JS files should be located in one of the following places:

In the SharePoint site inside the _catalogs/masterpage folder. This allows for the files to be included when exporting a design package.
In the _layouts folder on the filesystems of the SharePoint servers. This is primarily accomplished with custom SharePoint solutions created with Visual Studio.
On an external content source, such as a content delivery network.

Note

If you are using an external content source, ensure that all users accessing the SharePoint site have access to the external content source. The external content source may not be available to some users if their network configuration does not permit it.

When referencing files in the SharePoint site or in the _layouts folder, relative URLs should be used to allow alternate access maps to work. When referencing files on an external site, the exact, complete URL should be used.

Note

Alternate access mapping in SharePoint allows access to SharePoint web applications using multiple URLs. For instance, http://sharepoint/ and http://sharepoint.local/ could be the same SharePoint web application. A relative URL does not specify the protocol or domain in the URL. For instance, /_layouts/mystyles.css is a relative URL, while http://sharepoint/_layouts/mystyles.css is an absolute URL.

How to do it...

Follow these steps to add JavaScript and CSS references to a master page:

Open SharePoint Designer.
Select Open Site. Enter the complete URL to the SharePoint site and select Open.
From the Navigation pane, select Master Pages.
In the list of files in the Master Pages library, make a copy of seattle.master (for our example, we have renamed it Seattle_AddJavaScriptAndCSS.master).
Check out the new Seattle_AddJavaScriptAndCSS.master master page using the Check Out feature.
Open the Seattle_AddJavaScriptAndCSS.master master page.
Locate the <head> element. The following screenshot shows the <head> element highlighted in the code:
Add the following JavaScript reference:
```
<SharePoint:ScriptLink ID="customJavaScript" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/SampleJavaScript.js %>" runat="server"></SharePoint:ScriptLink>
```
Tip

In our JavaScript reference, we are using the ~Site variable to get the URL of the file relative to the SharePoint site. The ~SiteCollection variable can be used if the URL is relative to the SharePoint site collection instead.

Add the following CSS reference:

<SharePoint:CssRegistration ID="customCssRegistration" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/SampleStyleSheet.css %>" runat="server"></SharePoint:CssRegistration>

Save the master page.
Check in and publish the master page using the Check In and Publish options.
Set the master page as the Site Master Page.

How it works...

For traditional websites, the <link> and <script> tags are used to reference CSS and JavaScript files on a web page. While we can still use those in our SharePoint master pages, SharePoint provides server controls to reference CSS and JavaScript files. Using the ScriptLink and CssRegistration server controls will ultimately result in the <link> and <script> tags being added to the page when rendered. However, these server controls provide additional management by SharePoint to prevent duplication and allow for scripts to be loaded on demand rather than on every page load. In addition, these server controls allow variables, such as the site or site collection URLs, to be used in the path to the resource.