我在已上传到SharePoint 2016实例的JavaScript文件中有自定义标注过程。几乎完全相同的代码与SharePoint Online实例一起使用没有任何问题。
代码中唯一的区别是包含SP.SOD.executeFunc
以确保加载来自SharePoint的callout.js。
当我点击文档库中的相关元素时,似乎正在发生的是代码被拾取但未加载。如果我然后单击列表上的省略号,触发SharePoint提供的标准标注,然后单击我的元素 - 代码运行。但是当我第一次加载页面时,我可以在可用资源列表中看到callout.js。
如何在首次加载页面时让我的代码可用,并使用自定义标注单击我的元素,而不必先单击默认的SharePoint标注对象?
SP.SOD.executeFunc("callout.js", "Callout", loadPreview);
function loadPreview()
{
var itemCtx = {};
itemCtx.Templates = {};
// Define the list template type
itemCtx.ListTemplateType = 101;
itemCtx.OnPostRender = function(ctx) {
var rows = ctx.ListData.Row;
for (var i = 0; i < rows.length; i++) {
if (rows[i].File_x0020_Type.toLowerCase() === 'eml') {
var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
CustomRenderEMailSection(ctx, rows[i], rowElementId);
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
};
function buildCallout(renderCtx, data)
{
jQuery(document).ready(function ()
{
var placeHolder = jQuery(jQuery(jQuery(renderCtx.getContentElement()).children(".js-callout-body")[0]).children(".emailPlaceHolder")[0])
var url = placeHolder.attr("data-url")
placeHolder.html("<p>Hello!</p>");
});
}
function CustomRenderEMailSection(ctx, row, rowid)
{
if (row.File_x0020_Type.toLowerCase() !== 'eml') return;
var td = document.getElementById(rowid).cells[0].querySelector("div");
var url = converationDomain + "/sharepoint/previewemail?url=" + sharePointDomain + encodeURIComponent(row.FileRef);
EnsureScriptFunc("callout.js", "Callout", function ()
{
var calloutPopUpOptions = {}
calloutPopUpOptions.ID = 'EmailPreviewCallout_' + rowid; //Set the id
calloutPopUpOptions.launchPoint = td; //Set the destination element
calloutPopUpOptions.beakOrientation = 'topBottom';
calloutPopUpOptions.onOpeningCallback = function (calloutPopUpOptions) { return buildCallout(calloutPopUpOptions, null); }
calloutPopUpOptions.content = "<div class='emailPlaceHolder' data-url='" + url + "'></div>";
calloutPopUpOptions.openOptions = { event: 'click', showCloseButton: true };
calloutPopUpOptions.contentWidth = 600;
CalloutManager.createNewIfNecessary(calloutPopUpOptions);
});
}
更新
我设法证明问题是由脚本上传的方式引起的。由于需要在整个站点中使用,我使用PowerShell命令Add-PnPJavaScriptLink
使其可用于所有页面(我可以看到它为所有页面加载)。
但是,如果我将JavaScript发布到网站资源中并直接在网页上的资产网页部分上引用它,它就会按预期工作。