本文是系列文章的第一篇。

作为在SharePoint应用程序中使用JavaScript的第一步，就是要知道如何将一个写好的.js文件，引用到页面上。嗯，你可能觉得这个话题太简单了，"引用一个.js文件不就是在页面上方加一个<script>标签吗？"但是我们要考虑的事情，可通常要比这复杂得多。比如，我们大部分的.js文件，可能都是需要放置在网站中的所有页面上的，修改网站里面的每一个.aspx显然不是好主意，我们需要一个更好、更灵活的方案。

1、直接在母版页上引用.js文件

由于SharePoint网站中所有的页面，都默认使用同一个母版页(.master文件)，所以在母版页上去引用一个.js文件，就会自动让所有使用这个母版页的网站页面，都引用到这个.js文件。在母版页的<head>区域，添加相应的<script>标签，来引用我们所需的.js文件，如下图所示。

(虽然上面的截图是使用了SharePoint Designer，但是我并不建议你在生产环境中，直接使用SPD来对母版页进行这样的修改。正确的做法应该是在Visual Studio项目中维护对自定义母版页的修改，并且以Module方式将自定义母版页发布到网站里面。)

在母版页中直接引用.js，简单、直接。这种方法非常适合引用一些几乎所有页面上都会用到的JavaScript库，比如jQuery。在母版页上完成了对jQuery的引用之后，网站中所有页面(和页面上的所有自定义Web Part)中的JavaScript代码，就都可以直接使用jQuery库了。整个项目中，如果有一些公用的自定义JavaScript库文件，也可以用这种方式来进行引用。

但是要注意的一点是，你需要认真考虑是否将.js文件的引用放到<head>区域中。这是因为页面在载入一个.js文件后，需要等待这个.js文件运行完成，才能继续后面HTML内容的渲染 (因为JS代码有可能修改DOM，所以得等到它运行完成，才能继续)。如果你的自定义.js文件中的代码非常复杂且耗时，那么会影响整个HTML页面的渲染速度 (即使服务器能很快的运行完成页面后端的代码并将HTML内容发送回客户端的浏览器)。所以如果不是一定需要，你可以将对.js文件的引用，放到页面的最后面，这样页面可以先将HTML内容渲染出来，然后再载入并运行.js文件。

<script>标签支持defer属性，这个属性用来告诉浏览器:你可以在完成HTML内容的加载之后再运行我。HTML5还给<script>标签又添加了一个async属性，来标记代码可以异步执行。但是由于浏览器兼容性的原因(你懂的)，我建议你不要依赖这些属性。

2、使用SPWeb.CustomJavaScriptFileUrl属性

如果你希望在所有页面上都引用一个.js文件，而同时又不希望修改母版页，那么一个替代的方案是通过SPWeb.CustomJavaScriptFileUrl属性来做到。给这个属性设置一个.js文件的路径，母版页上的<SharePoint:CustomJSUrl>控件就会自动将那个.js文件载入到页面上。

下面的PowerShell脚本示范了如何为SPWeb.CustomJavaScriptFileUrl设置一个值。我使用PowerShell只是出于示范的目的，在你的项目中，这些代码通常会用C#实现，并很可能写在一个Feature的激活事件中，使得Feature被激活时，就设置好网站中所有页面需要载入的脚本。

SPWeb.CustomJavaScriptFileUrl属性的一个问题，就是它只能用来指定一个.js文件。但是这个问题很容易克服，我们可以让被引用的.js文件只是一个"启动器"，它负责去载入其它必需的.js文件。就类似这样：

当然你也可以把这个"启动器"写得稍微复杂、灵活一点。

SPWeb.CustomJavaScriptFileUrl属性的另外一个问题，就是通过它所引用的.js文件，必然在<head>区域就被加载。之前说过，如果你的.js文件中的代码比较复杂耗时，那么它会影响到页面的整体加载速度。这个问题可以通过一些JavaScript的技巧来避免。如下图所示范的代码，代码首先立即载入jquery.js文件，然后在页面DOM加载完成之后，再载入其它的.js文件。

3、使用Custom Action

在大部分情况下，使用Custom Action的目的，都是为了向界面上添加自定义的菜单项或其它UI元素，但是Custom Action其实也是可以用来向页面上添加.js引用的。

在Visual Studio中，向SharePoint项目添加一个"空元素"，然后如下所示，在<Elements>元素中添加一个<CustomAction>元素。"Location='ScriptLink'"属性告诉SharePoint，这个<CustomAction>的目的是为了向页面"注入"脚本。"ScriptSrc"属性用来指定要引用的.js文件的位置。在"ScriptSrc"属性里面，是可以使用"~site"和"~sitecollection"标记，用来表示网站和网站集的根目录的，比如:"ScriptSrc='~site/ScriptLibrary/Start.js'"。

如果要引用多个.js文件，也很好办，只需要添加多个<CustomAction>标签即可。注意每个<CustomAction>的"Sequence"属性，这个属性的值用来标识每个.js引用的载入顺序。SharePoint会按照"Sequence"属性所指定的顺序 (而并非<CustomAction>标签的声明顺序)，依次引用.js文件。

Custom Action最大的好处，在于你可以将它放在一个Feature里面。用户激活Feature，网站就会引用Custom Action所指定的.js文件，用户停用Feature，这些.js文件就不会被引用。这是一个巨大的灵活性。

Custom Action的一个限制，就是它的"ScriptSrc"属性所引用的.js文件，要么位于_layouts中，要么位于网站或网站集里面。它是不能用来引用一个外部的.js文件的，比如，"ScriptSrc=' http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.min.js'"是不会工作的。当然，你可以使用之前说过的"启动器"的方案，来解决这个问题，先通过Custom Action引用一个"启动器".js文件，然后在这个"启动器"里面去载入其它外部的.js文件。

4、自定义方案

如果上述的方案你都觉得不适合(或不够强大/灵活…)，那么你可以构建一个自定义的.js文件载入方案。一个自定义的.js文件加载方案应该尝试解决如下问题:

  • 可以引用网站内部、或外部任意位置的.js文件；
  • 可以指定某个.js文件的加载时机：在<head>区域/DOM加载完成之后/整个页面加载完成之后等等
  • 可以指定将某个.js文件只加载到特定页面，比如：列表的Forms页面/列表的新建列表项页面(New Form)/某个特定URL的页面
  • 可以指定多个.js文件之间的依赖关系，并按照依赖关系顺序加载

文本概要的讲述了在SharePoint网站中引用.js文件的几种常见方式，在后面的文章里面，我们将继续讲述将.js文件放置到哪里比较合适、如何在Web Part上使用JavaScript脚本等话题。

在SharePoint解决方案中使用JavaScript (1) – 引用.js文件的更多相关文章

  1. 在SharePoint解决方案中使用JavaScript (2) – 模块化

    本文是在SharePoint中使用JavaScript的第二篇文章,前面的文章包括: 在SharePoint解决方案中使用JavaScript (0) 在SharePoint解决方案中使用JavaSc ...

  2. JavaScript：引用js文件时的编码格式问题

    JavaScript:引用js文件时的编码格式问题 如果js文件的编码格式是utf-8,并且含有中文,那么按照正常的方法引用,就会出现乱码的情况. 方法/步骤   如果js文件的编码格式是utf-8, ...

  3. 在SharePoint解决方案中使用JavaScript (0)

    随着Web前段技术(JavaScript/HTML5)的日益发扬光大,在Web应用程序中,我们开始更多的使用JavaScript.很多以往是放在服务器上运行的逻辑,现在都开始逐渐的向前段转移.这种趋势 ...

  4. 【JSP中引入文件】JSP中获取根路径+引用js文件

    在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: inde ...

  5. 原生javascript添加引用js文件

            function addScriptTag(src) {                         var script = document.createElement(&qu ...

  6. [转载]SharePoint 2013 解决方案中使用JavaScript

    作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件,引用到页面上.嗯,你可能觉得这个话题太简单了,"引用一个.js文件不就是在页面上方 ...

  7. [MSDN] 使用 SharePoint 2013 中的 JavaScript 库代码完成基本操作

    MSDN:http://msdn.microsoft.com/zh-cn/library/jj163201.aspx 了解如何编写代码以在 SharePoint 2013 中使用 JavaScript ...

  8. 引用js文件

    在子模板里引用js文件的时候,需要把相应的.js文件放到static目录下,如引用static/jQuery/index.js文件: {% extends "base.html" ...

  9. html当中如何引用js文件

    3)html当中如何引用js文件 如果需要javascript工程师和html美工各干各的工作,需要分开写文件. 例 1.2 <html><head>    <scrip ...

随机推荐

  1. 超详细的celery异步任务和定时任务的教程

    转载自:https://segmentfault.com/a/1190000007780963

  2. 从数据库导出数据到excel之POI操作

    项目说明: 1:数据库中有两张表,主键关联 2:根据条件查询数据 3:处理为需要的数据封装类型,然后传到导出excel的方法中 <--框架部署就不详谈了,用的spring框架--> 补充: ...

  3. Toxiproxy 网络情况模式代理

    1. 介绍 Toxiproxy is a framework for simulating network conditions. It's made specifically to work in ...

  4. 【转】简述configure、pkg-config、pkg_config_path三者的关系

    原文网址:http://www.mike.org.cn/articles/description-configure-pkg-config-pkg_config_path-of-the-relatio ...

  5. 本地tomcat调用远程接口报错：java.lang.reflect.InvocationTargetException

    今天碰到一个奇怪的问题,本地Eclipse起了一个tomcat通过http去调一个外部接口,结果竟然报了一个反射的异常,先看下完整日志: , :: 下午 org.apache.catalina.sta ...

  6. Ubuntu 16.04 配置安卓5.1编译环境

    Ubuntu 16.04版本 电脑cpu必须是64位 硬盘分配大约100G的空间 1.ubuntu中更新源 $ sudo apt-get update 2.安装 openjdk-8-jdk $ sud ...

  7. 【备忘录】Golang交叉编译

    Golang 支持交叉编译,在一个windows平台可以生成linux或Mac系统下的可执行文件. Mac 下编译 Linux 和 Windows 64位可执行程序 CGO_ENABLED=0 GOO ...

  8. CentOS部署NetCore - 2. 安装NetCore SDK On CentOS

    登录微软官网,进入Install .NET Core SDK on Linux CentOS / Oracle 按照对应的指令,安装SDK Install the .NET SDK Update th ...

  9. 关于python urlopen 一个类似radio流的timeout方法

    终极解决方法来啦!看代码感受: import requests import eventlet import time eventlet.monkey_patch() try: with eventl ...

  10. mac下导出JetBrains IDE Support插件给linux

    自从google被和谐以后,上google的store安装插件是如此的费劲,好在mac下的chrome已经装好了,直接导出给linux就可以 mac下chrome的插件目录为 ~/Library/Ap ...