2013-06-05 10 views
26

Zastrzeżenie: Nie mam doświadczenia z SharePoint2013.SharePoint 2013 dodać javascript po załadowaniu strony

Mam problem - muszę włączyć/zwolnić niektóre funkcje javascript po załadowaniu całej strony. Próbowałem słuchać zdarzeń DOMDocumentReady i window.load, ale Sharepoint renderuje resztę strony po tych zdarzeniach.

Moje pytanie brzmi: co powinienem zrobić, aby móc uruchomić skrypt po całej stronie z renderowaniem ajax. Zauważyłem również, że nawigacja po stronie jest oparta na części hash (#). Oczywiście muszę również wykryć tę chwilę.

Każda pomoc, a nawet link do prawej strony w dokumentacji byłby świetny!

+0

Czy używasz jQuery do wywoływania żądań ajaxowych, czy jest to jakiś specjalny przypadek programu SharePoint? – Bloafer

+0

Muszę zintegrować bibliotekę komercyjną firm trzecich, która oczekuje, że w momencie jej załadowania cały html jest obecny. Nie będę robić żadnych żądań ajaxowych na początku. Muszę też dołączyć detektory zdarzeń na niektórych linkach itp. –

+0

Ale czego używasz do odpalania żądań Ajax? – Bloafer

Odpowiedz

55

Masz rację, WIELE rzeczy dzieją się na stronie po $ (document) .ready(). Rok 2013 zapewnia kilka opcji.

1) Script on Demand. (Obciążenie plik js następnie wykonać mój kod)

function stuffThatRequiresSP_JS(){ 
    //your code 
} 

SP.SOD.executeFunc("sp.js")

2) opóźnienia aż do załadowania (czekać na pliku js, a następnie uruchomić)

function stuffToRunAfterSP_JS(){ 
    //your code 
} 
ExecuteOrDelayUntilScriptLoaded(stuffToRunAfterSP_JS, "sp.js") 

3) obciążenie po innych rzeczy kończy

function runAfterEverythingElse(){ 
    // your code 
} 
_spBodyOnLoadFunctionNames.push("runAfterEverythingElse"); 

Źródła:

executeFunc: http://msdn.microsoft.com/en-us/library/ff409592(v=office.14).aspx

ExecuteOrDelayUntilScriptLoaded: http://msdn.microsoft.com/en-us/library/ff411788(v=office.14).aspx

mogę znaleźć źródła na _spBodyOnLoadFunctionNames ale używam go w kilku miejscach.

powodzenia.

+0

dziękuję za odpowiedź, chciałbym, żebyś był tu wcześniej;) - jeśli ktoś jest zainteresowany, sP2013 emituje również "FakeEvents" na elemencie ciała. Te zdarzenia są różne w każdej przeglądarce, ale po prostu ctrl + f w sp.start.js coś podobnego do funkcji Fakeevent. (nie pamiętam dokładnie teraz, ale powinno to być coś takiego). a także zauważ, że strona wyszukiwania SP2013 jest ładowana po wszystkich tych zdarzeniach;). Tak więc na stronie głównej można słuchać tych wydarzeń, ale na stronie wyszukiwania nie. –

9

Udokumentowana funkcja rejestracji zdarzeń, która jest mniej więcej odpowiednikiem _spBodyOnLoadFunctionNames, jest SP.SOD.executeOrDelayUntilEventNotified. Zadzwoń do tego, aby otrzymywać powiadomienia o „sp.bodyloaded” wydarzenie:

SP.SOD.executeOrDelayUntilEventNotified(function() { 
    // executed when SP load completes 
}, "sp.bodyloaded"); 

Ten uchwyt rzeczywiście odpala lekko przed funkcji _spBodyOnLoadFunctionNames.

Wniosek ten jest dla SharePoint 2010, ale narzędzie SOD występuje w SharePoint 2013: http://msdn.microsoft.com/en-us/library/office/ff410354(v=office.14).aspx

1

https://mhusseini.wordpress.com/2012/05/18/handle-clicks-on-calendar-items-in-sharepoint-2010-with-javascript/

powyższy link pracował dla mnie. Zasadniczo używa ExecuteOrDelayUntilScriptLoaded do uruchomienia swojego kodu haka kalendarza po załadowaniu SPUI.ApplicationPages.Calendar.js.

Następnie w haku kalendarza dołącza on swoją własną funkcję do: SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed function.

_spBodyOnLoadFunctionNames.push("LaunchColorCodeCalendarScriptOnReady"); 


function LaunchColorCodeCalendarScriptOnReady() { 


    ExecuteOrDelayUntilScriptLoaded(
     MyCalendarHook, 
     "SP.UI.ApplicationPages.Calendar.js"); 


} 

function MyCalendarHook() { 
    var _patchCalendar = function() { 
     //Do something to the items in the calendar here 
     //ColorCodeCalendar(); 
    }; 

    var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed; 
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function ($p0, $p1) { 
     _onItemsSucceed.call(this, $p0, $p1); 
     _patchCalendar(); 
    }; 
} 
8

Istnieją różne techniki wykorzystywane do pod warunkiem nasz zwyczaj kod JavaScript załadowane przed/w środku/po zdarzeń onload w SharePoint:

ExecuteOrDelayUntilBodyLoaded. 
Sys.Application.pageLoad. 
document.ready Jquery. 
_spBodyOnLoadFunctionNames. 
_spBodyOnLoadFunction. 
ExecuteOrDelayUntilScriptLoaded:sp.core.js. 
SP.SOD.executeFunc: sp.js. 
Sys.WebForms.PageRequestManager.PageLoaded 

- funkcja ExecuteOrDelayUntilBodyLoaded jest zawsze wykonywane pierwszy (ale na to etap nie możemy uzyskać dostępu do metod SP). Może to być przydatne do wykonania naszego niestandardowego kodu na wcześniejszym etapie procesu OnLoad.

- Istnieją dwie funkcje onLoad programu SharePoint _spBodyOnLoadFunctionNames i _spBodyOnLoadFunction. Zawsze wykonywane w zamówieniu. SO, jeśli chcemy wykonać kod po wszystkich funkcjach zawartych przez nas (lub innych programistów) w _spBodyOnLoadFunctionNames, wtedy jest użyteczne użycie tej funkcji _spBodyOnLoadFunction, ponieważ jest ona wykonywana jako ostatnia.

- ExecuteOrDelayUntilScriptLoaded: sp.core.js i SP.SOD.executeFunc: sp.js. zamieniają kolejność wykonywania w losowy sposób.

- Jeśli chcemy wykonać niektóre funkcje po wszystkich funkcjach (SP, po funkcjach ładowania, Yammer, itp.) Możemy użyć tej funkcji do dołączenia zdarzenia OnLoad -> Sys.WebForms.PageRequestManager.PageLoaded.

można zobaczyć cały artykuł wyjaśniający każdego typu wady i zalety tutaj: https://blog.josequinto.com/2015/06/16/custom-javascript-function-loaded-after-the-ui-has-loaded-in-sharepoint-2013/

Pozdrawiam!

0

Tu jest ładny artykuł, jak korzystać z wbudowanego w SharePoint SOD (scenariusz On Demand), funkcjonalność: http://www.ilovesharepoint.com/search/label/SOD

To działa ok zarówno dla SP 2010 i 2013.

The pomysł na żądanie skryptu załadunku naprawdę sensowne. SharePoint 2010 ładuje naprawdę wiele skryptów JavaScript - to wymaga czasu! Pomysł jest następujący: najpierw wczytaj kod HTML i pozwól mu go wyrenderować, aby użytkownik mógł odczytać żądane informacje tak szybko, jak to możliwe. A w drugim kroku załaduj zachowanie (skrypty JavaScript).

Powiązane problemy