SharePoint 2016:尽管Ajax和/或MDS,如何强制JS在每个网站页面上执行?

问题描述 投票:0回答:1

我正在实现一个非常简单的用例,但我不仅找不到解决方案,而且找不到任何谈论它的文章,好像我是唯一一个。

我希望我的自定义Javascript在给定SharePoint站点的每个页面上执行。

很容易,你会说。好吧,不。远非如此,就像使用SharePoint一样。

重现步骤 :

  • 创建一个开箱即用的发布网站
  • 使用我在下面描述的任何方法包括下面的自定义javascript
  • 转到该站点,转到主页。它是一个发布网站,因此默认情况下,您的左侧导航窗格默认至少包含“主页”和“文档”。
  • 第一次加载页面时,javascript会执行。现在,单击“文档”。页面更改但Javascript未执行。

那是因为SharePoint使用Ajax。即使MDS被禁用。它通过URL中的哈希(#)使用Ajax。

例如,它转换了一个非常有用的链接,如下所示:

<a href src =“/ SitePages / Home.aspx”>

单击它时进入此URL:

https://your-url/sites/your-site/_layouts/15/start.aspx#/SitePages/Home.aspx

这是我的Javascript:

if (ExecuteOrDelayUntilScriptLoaded && _spBodyOnLoadFunctionNames) {
    _spBodyOnLoadFunctionNames.push(ExecuteOrDelayUntilScriptLoaded(
        function () {
            alert("It's working!");
        }, "sp.js"));
} 

所以,我尝试了以下包含Javascript的方法:

  1. 通过用户自定义操作。我用this very handy page添加它,但那不相关。该操作被添加到站点,我可以在首次加载时看到DOM中的JS。但是在我单击页面中的链接并且SP使用Ajax之后,它不会再次执行它。
  2. 通过修改母版页 - 即:seattle.html。起初我以这种方式包含它,只是在其他原生内容中:

<head runat =“server”>

...

<! - SPM:<SharePoint:ScriptLink language =“javascript”name =“suitelinks.js”OnDemand =“true”runat =“server”Localizable =“false”/> - >

<! - SPM:<SharePoint:ScriptLink language =“javascript”Name =“~sitecollection / SiteAssets / MYJAVASCRIPT.js”runat =“server”/> - >

但后来我读到了AjaxDelta(这里:https://msdn.microsoft.com/fr-fr/library/office/dn456543.aspx),我把我的包含(仍在标题中)移到<AjaxDelta>中,如下所示:

<head runat =“server”>

...

<! - SPM:<SharePoint:AjaxDelta id =“DeltaPlaceHolderAdditionalPageHead”Container =“false”runat =“server”> - >

<! - SPM:<asp:ContentPlaceHolder id =“PlaceHolderAdditionalPageHead”runat =“server”/> - >

<! - SPM:<SharePoint:DelegateControl runat =“server”ControlId =“AdditionalPageHead”AllowMultipleControls =“true”/> - >

<! - SPM:<SharePoint:ScriptLink language =“javascript”Name =“~sitecollection / SiteAssets / MYJAVASCRIPT.js”runat =“server”/> - >

<! - SPM:</的SharePoint:阿贾克斯三角洲> - >

......然而没有任何作用。通过单击SharePoint的“托管”链接在同一站点的页面之间切换时,Javascript永远不会执行。

我正在寻找一个能够优雅地处理SharePoint的Ajax的解决方案,而不是劫持页面上每个超链接的重型和危险的东西。例如,我试图将我的代码挂钩到ajaxNavigate方法(例如:addNavigate),但我不确定我是否理解那里的实际内容以及它是否对我有任何帮助。

编辑:

  • 似乎有一种共识(例如,最底层的here),无论如何都会执行用户自定义操作 - 因为SharePoint出于某种原因将其ScriptLink放入AjaxDelta中。嗯,那不是我目睹的。
  • 还有一个共识是,使用“RegisterModuleInit”可以解决这个问题。这对我也不起作用。

我非常困惑。我认为当用户点击链接然后点击“返回”时,这两个解决方案可以解决导航问题。但它并没有解决SharePoint的聪明的“托管”,Ajax泛滥的超链接。

javascript sharepoint sharepoint-online sharepoint-2016
1个回答
0
投票

到目前为止,我终于找到了一个似乎永远不会失败的解决方案。这真是一种解脱。

简答:使用asyncDeltaManager.add_endRequest

这篇MSDN讨论提出了一种实现它的简单方法:https://social.msdn.microsoft.com/Forums/office/en-US/1ae292b4-3589-46f6-bedc-7bd9dc741f1b/javascript-code-to-execute-after-all-the-elements-and-css-are-loaded?forum=appsforsharepoint

$(function () {
  ExecuteOrDelayUntilScriptLoaded(function () {
      if (typeof asyncDeltaManager != "undefined")
           asyncDeltaManager.add_endRequest(MYCUSTOMCODE); //execute it after any ajax event
      else 
           MYCUSTOMCODE(); //execute it at first load
  }, "start.js");
});

这显示了如何在SharePoint的循环中正确包含它(使用ExecuteOrDelayUntilScriptLoaded)https://sharepoint.stackexchange.com/questions/171490/javacript-only-executed-on-first-page-load

完整的解决方案(objet“LefeCycleHelper”),由Mx https://sharepoint.stackexchange.com/questions/192974/where-to-place-a-js-script-with-whom-i-need-to-get-an-div-id/193009#193009提供

//use an IIFE to create a scope and dont dirty the global scope
(function (_) {

// use strict to ensure we dont code stupid
'use strict';

var initHandlers = [];
var initMDSHandlers = [];

var ensureSharePoint = function (handler) {
    var sodLoaded = typeof (_v_dictSod) !== 'undefined' && _v_dictSod['sp.js'] != null && _v_dictSod['sp.js'].state === Sods.loaded;

    if (sodLoaded) {
        handler();
    } else {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { });
        SP.SOD.executeOrDelayUntilScriptLoaded(handler, 'sp.js');
    }
};

var initMDS = function () {
    for (var i = 0; i < initMDSHandlers.length; i++) {
        initMDSHandlers[i]();
    }
};

var init = function () {
    // Register MDS handler
    if ('undefined' != typeof g_MinimalDownload && g_MinimalDownload && (window.location.pathname.toLowerCase()).endsWith('/_layouts/15/start.aspx') && 'undefined' != typeof asyncDeltaManager) {
        asyncDeltaManager.add_endRequest(initMDS);
    } else {
        for (var i = 0; i < initHandlers.length; i++) {
            initHandlers[i]();
        }
    }
};

var registerInit = function (handler) {
    initHandlers.push(handler);
};

var registerInitMDS = function (handler) {
    initMDSHandlers.push(handler);
};

var domReady = (function (handler) {
    var fns = [];
    var listener;
    var loaded = (document.documentElement.doScroll ? /^loaded|^c/ : /^loaded|^i|^c/).test(document.readyState);

    if (!loaded) {
        document.addEventListener('DOMContentLoaded', listener = function () {
            document.removeEventListener('DOMContentLoaded', listener);
            loaded = 1;
            while (listener = fns.shift()) listener();
        });
    }

    return function (fn) {
        loaded ? setTimeout(fn, 0) : fns.push(fn);
    };
})();


var attachToLoad = function (functionToAttach) {
    registerInit(functionToAttach);
    registerInitMDS(functionToAttach);
   domReady(function () {
       init();
    });
};

_.AttachToLoad = attachToLoad;

// THIS WILL PROTECT YOUR GLOBAL VAR FROM THE GARBAGE COLLECTOR
window.LifeCycleHelper = _;
if (window.Function != 'undefined' && typeof (Function.registerNamespace) == 'function') {
    Function.registerNamespace('LifeCycleHelper');
}
})({});

var theCodeYouWantToRun = function () {
    alert('theCodeYouWantToRun');
};

window.LifeCycleHelper.AttachToLoad(theCodeYouWantToRun); 
© www.soinside.com 2019 - 2024. All rights reserved.