[转载]SharePoint 2013 解决方案中使用JavaScript
作为在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的更多相关文章
- SharePoint 2013 页面中window/document.onload/ready 事件不能触发的解决方案
问题1:在SharePoint 2013页面中使用Javascript 事件window/document.onload/ready时,你会发现处理onload/ready事件的代码根本不能执行. 问 ...
- 在SharePoint解决方案中使用JavaScript (2) – 模块化
本文是在SharePoint中使用JavaScript的第二篇文章,前面的文章包括: 在SharePoint解决方案中使用JavaScript (0) 在SharePoint解决方案中使用JavaSc ...
- 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件
本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...
- SharePoint 2013/2010 中的日历重合 (Calendars Overlay)
本文介绍 SharePoint 2013/2010 中的日历重合 (Calendars Overlay). 日历重合 (Calendars Overlay)的用途就是将 不多于10个日历或日历视图聚集 ...
- 在SharePoint 2013 场中移除服务器,提示 cacheHostInfo is null 错误
Problem 在SharePoint 2013 场中移除服务器,提示 cacheHostInfo is null 错误 Resolution 这是由于SharePoint 2013中分布式缓存实例( ...
- Office 365 - SharePoint 2013 Online 中创建母版页
1.登陆SharePoint Online站点,点击右上角的设置按钮,如下图: 2.点击进入网站设置,到下面两个地方开启SharePoint Server 发布基础架构: 网站集管理 – 网站集功能 ...
- 转载 SharePoint 2013 Search功能
转载原出处: http://www.cnblogs.com/OceanEyes/p/SharePont-2013-Search-Develop.html 阅读目录 启用Search Service A ...
- 转载 SharePoint 2013配置Master Page and Page Layout
转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...
- [转载]SharePoint 2013测试环境安装配置指南
软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企业版 Office Web Apps 2013 备注: ...
随机推荐
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- Java蛇形数组的简单实现代码
上周五和朋友聊天谈到个蛇形数组的java实现办法,命题是:假设一个二维数组宽w高h,从1开始蛇形输出. int[][] numberMatric = new int[w][h]; 当时午睡过头脑袋不清 ...
- Gradle 构建 android 应用常见问题解决指南
前言 android gradle 插件已经发展到0.5.7,同时gradle 本身也到了1.8,相比两个月前,android gradle 更快,更完善,也更好用了,为了让各位androider 早 ...
- 如何通过Socket TCP发送并接收一个文件?
一.小结 1.大包发小包收,只发一次. 2.发时把文件扩展名,文件长度也随同一起发送,方便接收端接收时另存为正确的文件类型,并判断是否已经接收完毕. 如果不一起发送,分为文件扩展名,文件长度,文件内容 ...
- Requirements of an SAP system administrator
Requirements of an SAP system administrator Have a "proper" attitude Protect and safeguard ...
- java观察者模式的实现
在看博客里,有个订阅功能,当你订阅后,当博主发布新的博客,你都能收到消息.这是如何实现的?是不是后台有个线程在不停的轮询?如果是这样的话,显然太耗资源,如果当博客在发布时,找到所有的订阅者,然后循环的 ...
- Scala 深入浅出实战经典 第61讲:Scala中隐式参数与隐式转换的联合使用实战详解及其在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...
- Android自定义Seekbar拖动条式样
SeekBar拖动条可以由用户控制,进行拖动操作.比如,应用程序中用户需要对音量进行控制,就可以使用拖动条来实现. 1.SeekBar控件的使用 1.1SeekBar常用属性 SeekBar的常用属性 ...
- 编程语言 IDE 对比
IDE是集成开发环境的英文缩写,所谓集成开发环境,就是将你在开发过程中所需要的工具或功能集成到了一起,比如代码编写.分析.编译.调试等功能,从而最大化地提高开发者的工作效率. 每种编程语言都有一些特定 ...
- JMir——Java版热血传奇2之资源文件与地图
我虽然是90后,但是也很喜欢热血传奇2(以下简称“传奇”)这款游戏. 进入程序员行业后自己也对传奇客户端实现有所研究,现在将我的一些研究结果展示出来,如果大家有兴趣的话不妨与我交流. 项目我托管到co ...