Using JavaScript in a SharePoint solution (1) – Referencing a. js file

This article is the first article in a series.

• Using JavaScript in a SharePoint solution (0)

?

The first step in using JavaScript in a SharePoint application is to know how to put a well-written. js file on the page. Well, you might think this topic is too simple, "does quoting a. js file just add a <script> tag to the top of the page?" "But the things we have to think about are usually much more complicated than that." For example, most of our. js files, which may all be placed on all pages in the site, modify every. aspx in the site is obviously not a good idea, and we need a better, more flexible solution.

?

1. Refer to the. js file directly on the master page

?

Because all pages in a SharePoint site use the same master page (. master file) by default, referring to a. js file on the master page automatically allows all Web pages that use the master page to refer to the. js file. In the

?

?

(Although SharePoint Designer is used above, I do not recommend that you use SPD directly in a production environment to make such modifications to the master page.) The correct approach should be to maintain modifications to the custom master page in the Visual Studio project, and to publish the custom master page to the Web site in module mode. )

?

Reference. js directly in the master page, simple and straightforward. This approach is ideal for referencing JavaScript libraries that are used on almost all pages, such as jquery. After a reference to jquery has been completed on the master page, the JavaScript code in all pages (and all custom Web Part on the page) in the site can be used directly from the jquery library. The entire project, if there are some common custom JavaScript library files, can also be referenced in this way.

?

Note, however, that you need to seriously consider whether to place a reference to the. js file in the

?

?

The <script> tag supports the defer attribute, which is used to tell the browser that you can run me after the HTML content is loaded. HTML5 also added an async attribute to the <script> tag to mark that the code can be executed asynchronously. But because of browser compatibility (you know), I recommend that you do not rely on these attributes.

?

2. Using the Spweb.customjavascriptfileurl property

?

If you want to refer to a. js file on all pages without modifying the master page, an alternative is to do so through the Spweb.customjavascriptfileurl property. Set the path of a. js file to this property, and the <SharePoint:CustomJSUrl> control on the master page will automatically load that. js file onto the page.

?

The following PowerShell script demonstrates how to set a value for Spweb.customjavascriptfileurl. I use PowerShell only for demonstration purposes, and in your project, the code is usually implemented in C # and probably written in a feature activation event, so that when feature is activated, it sets the script that all pages in the site need to load.

?

?

One problem with the Spweb.customjavascriptfileurl property is that it can only be used to specify a. js file. But this problem is easy to overcome, we can let the quoted. js file is just a "launcher", it is responsible for loading other required. js files. Just like this:

?

?

Of course, you can also write this "launcher" a little more complicated and flexible.

?

?

Another problem with the Spweb.customjavascriptfileurl property is that the. js file referenced by it is bound to be loaded in the

?

?

3. Use custom Action

?

In most cases, the purpose of the custom action is to add a custom menu item or other UI element to the interface, but the custom action can also be used to add the. js reference to the page.

?

In Visual Studio, add an "empty element" to your SharePoint project, and then add a <CustomAction> element to the <Elements> element as shown below. The "location= ' ScriptLink '" property tells SharePoint that the purpose of this <CustomAction> is to "inject" the script into the page. The "Scriptsrc" property is used to specify the location of the. js file to be referenced. Inside the "scriptsrc" attribute, you can use "~site" and "~sitecollection" tags to represent the root of the site and site collection, for example: "Scriptsrc= ' ~site/scriptlibrary/start.js ' "。

?

?

If you want to reference more than one. js file, it is also very good to do, just need to add multiple <CustomAction> tags. Note the "Sequence" attribute for each <CustomAction>, which is used to identify the loading order of each. js reference. SharePoint refers to the. js file in the order specified by the "Sequence" property instead of the <CustomAction> tag's declaration order.

?

?

The best thing about Custom action is that you can put it in a feature. When the user activates the feature, the site references the. js file specified by the custom action, and the user deactivates the feature, and these. js files are not referenced. This is a great deal of flexibility.

?

A limitation of the Custom action is the. js file that is referenced by its "scriptsrc" property, either in _layouts or in the site or site collection. It is not used to reference an external. js file, for example, "scriptsrc= ' http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.min.js '" is not working. Of course, you can use the previously mentioned "launcher" scheme to solve this problem, first by the custom action to reference a "launcher". js file, and then in this "launcher" to load other external. js files.

?

4. Custom scheme

?

If the above scenarios are not suitable for you (or not strong enough/flexible ...), then you can build a custom. js file loading scheme. A custom. js file load scheme should try to solve the following problems:

• You can refer to a. js file, either inside or outside the Web site;
• You can specify the loading time for a. js file: After the
• You can specify that a. js file be loaded only to a specific page, such as a new list item page for the Forms page/list of the list (new Form)/page for a specific URL
• You can specify a dependency between multiple. js files and load them in the order of dependencies

?

The text overview describes several common ways to reference. js files in a SharePoint site, and in a later article we will continue to talk about where to place the. js files, how to use JavaScript scripts on the Web Part, and more.

Using JavaScript in a SharePoint solution (1) – Referencing a. js file