作为在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文件》

[转载]SharePoint 2013 解决方案中使用JavaScript的更多相关文章

  1. SharePoint 2013 页面中window/document.onload/ready 事件不能触发的解决方案

    问题1:在SharePoint 2013页面中使用Javascript 事件window/document.onload/ready时,你会发现处理onload/ready事件的代码根本不能执行. 问 ...

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

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

  3. 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件

    本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...

  4. SharePoint 2013/2010 中的日历重合 (Calendars Overlay)

    本文介绍 SharePoint 2013/2010 中的日历重合 (Calendars Overlay). 日历重合 (Calendars Overlay)的用途就是将 不多于10个日历或日历视图聚集 ...

  5. 在SharePoint 2013 场中移除服务器，提示 cacheHostInfo is null 错误

    Problem 在SharePoint 2013 场中移除服务器,提示 cacheHostInfo is null 错误 Resolution 这是由于SharePoint 2013中分布式缓存实例( ...

  6. Office 365 - SharePoint 2013 Online 中创建母版页

    1.登陆SharePoint Online站点,点击右上角的设置按钮,如下图: 2.点击进入网站设置,到下面两个地方开启SharePoint Server 发布基础架构: 网站集管理 – 网站集功能 ...

  7. 转载 SharePoint 2013 Search功能

    转载原出处: http://www.cnblogs.com/OceanEyes/p/SharePont-2013-Search-Develop.html 阅读目录 启用Search Service A ...

  8. 转载 SharePoint 2013配置Master Page and Page Layout

    转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...

  9. [转载]SharePoint 2013测试环境安装配置指南

    软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企业版 Office Web Apps 2013 备注: ...

随机推荐

  1. 隐知识：reloadData 方法之后，view并不会立即更新其contentSize

    在使用UITableView .UICollectionView ,调用reloadData方法之后,并不立即更新其contentSize.原因如下:http://jacksonriver.com/n ...

  2. nginx 配置其他路径

    gedit /etc/nginx/sites-enabled/default location /hlstest { types { application/vnd.apple.mpegurl m3u ...

  3. 如何使用代码动态的获取和设置ImageView的宽度和高度？

    http://blog.csdn.net/wulianghuan/article/details/8644144 国内某金融企业的一道面试题:如何在代码中获得一个ImageVIew的高度和宽度? 相信 ...

  4. SVN命令模式批量更新多个项目文件

    使用svn作为版本管理是,在一个仓库下边同时建立多个项目,每天上班都需要一个个更新,为了发挥程序员懒的精神,能让电脑做的,绝不手工操作.作为自动化处理,在windows环境,首先想到了bat Tort ...

  5. GET请求中URL的最大长度限制总结

    由于jsonp跨域请求只能通过get请求,url长度根据浏览器及服务器的不同而有不同限制. 若要支持IE的话,最大的长度为2083字符,若是中文字符的话只有2083/9=231个字符. 若是Chrom ...

  6. 【高德地图API】如何设置Icon的imageSize？

    在地图开发中,我们需要把标注换成各种各样的图片,以突显个性.    在高分辨率的手机下,图片尺寸需要压缩至一半,以保持图片清晰.让我们来看一看,应该如何实现. 有开发者为了改变图片的尺寸,直接写成了 ...

  7. Ubunbu新建的用户使用SecureCrt无法Table补全、无法高亮

    Check 两个地方: 1.  确保/etc/passwd中配置有/bin/bash (这个是用来控制补全). 2. 在~/.bashrc中配置, export TERM=linux (这个是用来控制 ...

  8. 《objective-c基础教程》学习笔记（九）—— Foundation框架介绍

    在之前的博文中,我们创建的项目文件的时候,默认都有引用#import <Foundation/foundation.h> 这个头文件.但是,之前我们对Foundation都没有展开介绍.这 ...

  9. Solr 5.x集成中文分词word，mmseg4j

    使用标准分词器,如图: 使用word分词器 下载word-1.3.jar,注意solr的版本和word分词的版本 将文件word-1.3.jar拷贝至文件夹C:\workspace\Tomcat7.0 ...

  10. Photoshop操作指南

    缩放工具(Z) 之后涉及到移动功能,暂时切换到小抓手工具. 图1 图2 切换到:暂时切换到:当按住空格键的时候,显示小抓手工具.松开之后,又回到了之前的显示上. 满画布显示当前画面:ctrl+0(数字 ...