如何：通过 JavaScript 使用网页上的 Web 部件
上次修改时间： 2011年6月20日
适用范围： SharePoint Foundation 2010
本文内容
使用 ECMAScript（JavaScript、JScript）更新 Web 部件的标题
使用 JavaScript 向页面中添加 Web 部件
使用 JavaScript 从页面中删除 Web 部件
可使用 SP.WebParts 命名空间中的类通过客户端对象模型处理 Web 部件。LimitedWebPartManager 对象使您能够通过 get_webParts 函数访问共享或个人范围内 SharePoint 页面上 Web 部件的集合。
使用 ECMAScript（JavaScript、JScript）更新 Web 部件的标题
以下示例更改指定网站的 Default.aspx 页上 Web 部件集合中第二个 Web 部件的标题。该示例使用 LINQ 查询表达式以便只返回每个 Web 部件的标题，并调用 saveWebPartChanges() 函数来保存更改。将调用两次 executeQueryAsync(succeededCallback, failedCallback) 函数，第一次调用返回 Web 部件的集合，以便代码可以验证页面上是否存在 Web 部件，第二次调用使更改在数据库中生效。
var siteUrl = '/sites/MySiteCollection';
var serverRelativeUrl = '/sites/MySiteCollection/Default.aspx';
function updateWebPartTitle() {
this.clientContext = new SP.ClientContext(siteUrl);
var oFile = clientContext.get_web().getFileByServerRelativeUrl(serverRelativeUrl);
var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
this.collWebPart = limitedWebPartManager.get_webParts();
clientContext.load(collWebPart);
clientContext.executeQueryAsync(Function.createDelegate(this, this.changeTitle), Function.createDelegate(this, this.onQueryFailed));
}
function changeTitle() {
if (!collWebPart.get_count()) {
alert('No Web Parts on this page.');
}
var oWebPartDefinition = collWebPart.get_item(2);
this.oWebPart = oWebPartDefinition.get_webPart();
oWebPart.set_title('My New Web Part Title');
oWebPartDefinition.saveWebPartChanges();
clientContext.load(oWebPart, 'TitleUrl');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert('Title changed for Web Part: ' + this.oWebPart.get_titleUrl());
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
使用 JavaScript 向页面中添加 Web 部件
以下示例添加一个自定义内容编辑器 Web 部件，使其按顺序成为指定网站的 Default.aspx 页左侧区域内的第二个 Web 部件。该示例定义该 Web 部件的 XML，将该字符串传递给 importWebPart(webPartXml) 函数，然后调用 addWebPart(webPart, zoneId, zoneIndex) 函数来将该 Web 部件添加到页面中。
var siteUrl = '/sites/MySiteCollection';
var serverRelativeUrl = '/sites/MySiteCollection/Default.aspx';
function addWebPart() {
var clientContext = new SP.ClientContext(siteUrl);
var oFile = clientContext.get_web().getFileByServerRelativeUrl(serverRelativeUrl);
var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var webPartXml = '<?xml version=\"1.0\" encoding=\"utf-8\"?>' +
'<WebPart xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"' +
' xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\"' +
' xmlns=\"https://schemas.microsoft.com/WebPart/v2\">' +
'<Title>My Web Part</Title><FrameType>Default</FrameType>' +
'<Description>Use for formatted text, tables, and images.</Description>' +
'<IsIncluded>true</IsIncluded><ZoneID></ZoneID><PartOrder>0</PartOrder>' +
'<FrameState>Normal</FrameState><Height /><Width /><AllowRemove>true</AllowRemove>' +
'<AllowZoneChange>true</AllowZoneChange><AllowMinimize>true</AllowMinimize>' +
'<AllowConnect>true</AllowConnect><AllowEdit>true</AllowEdit>' +
'<AllowHide>true</AllowHide><IsVisible>true</IsVisible><DetailLink /><HelpLink />' +
'<HelpMode>Modeless</HelpMode><Dir>Default</Dir><PartImageSmall />' +
'<MissingAssembly>Cannot import this Web Part.</MissingAssembly>' +
'<PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge><IsIncludedFilter />' +
'<Assembly>Microsoft.SharePoint, Version=13.0.0.0, Culture=neutral, ' +
'PublicKeyToken=94de0004b6e3fcc5</Assembly>' +
'<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>' +
'<ContentLink xmlns=\"https://schemas.microsoft.com/WebPart/v2/ContentEditor\" />' +
'<Content xmlns=\"https://schemas.microsoft.com/WebPart/v2/ContentEditor\">' +
'<![CDATA[This is a first paragraph!<DIV> </DIV>And this is a second paragraph.]]></Content>' +
'<PartStorage xmlns=\"https://schemas.microsoft.com/WebPart/v2/ContentEditor\" /></WebPart>';
var oWebPartDefinition = limitedWebPartManager.importWebPart(webPartXml);
this.oWebPart = oWebPartDefinition.get_webPart();
limitedWebPartManager.addWebPart(oWebPart, 'Left', 1);
clientContext.load(oWebPart);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert('Web Part added: ' + oWebPart.get_title());
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
使用 JavaScript 从页面中删除 Web 部件
以下示例演示如何使用 deleteWebPart() 函数从指定网站的 Home.aspx 页中删除第一个 Web 部件。
var siteUrl = '/sites/MySiteCollection';
var serverRelativeUrl = '/sites/MySiteCollection/SitePages/Home.aspx';
function retrieveWebParts() {
this.clientContext = new SP.ClientContext(siteUrl);
var oFile = clientContext.get_web().getFileByServerRelativeUrl(server2RelativeUrl);
this.limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
this.collWebPart = limitedWebPartManager.get_webParts();
clientContext.load(collWebPart);
clientContext.executeQueryAsync(Function.createDelegate(this, this.deleteWebPart), Function.createDelegate(this, this.onQueryFailed));
}
function deleteWebPart () {
if (!collWebPart.get_count()) {
alert('No Web Parts to delete.');
}
var webPartDefinition = limitedWebPartManager.get_webParts().get_item(0);
webPartDefinition.deleteWebPart();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert('Web Part deleted.');
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
请参阅
概念
SharePoint Foundation 中的 Web 部件