how to hook into page load

[k4lizen]

I'm using

    - navigation.instant

I want to run some javascript each time a new page is loaded. How can I do this? Apparently I should expect some event to be fired when that happens (like contentUpdated) and hook into that, but that doesn't seem to be happening. What are my options?

[kamilkrzyskow]

Hi @k4lizen,
like explained on the customization page, you'd subscribe to the document$ RxJS observable:
(see the admonition) https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

document$.subscribe(function() {
  console.log("Initialize third-party libraries here")
})

Additionally, there are other observables that were made available:

mkdocs-material/src/templates/assets/javascripts/bundle.ts

Lines 308 to 318 in d205ef5

	window.document$ = document$ /* Document observable */
	window.location$ = location$ /* Location subject */
	window.target$ = target$ /* Location target observable */
	window.keyboard$ = keyboard$ /* Keyboard observable */
	window.viewport$ = viewport$ /* Viewport observable */
	window.tablet$ = tablet$ /* Media tablet observable */
	window.screen$ = screen$ /* Media screen observable */
	window.print$ = print$ /* Media print observable */
	window.alert$ = alert$ /* Alert subject */
	window.progress$ = progress$ /* Progress indicator subject */
	window.component$ = component$ /* Component observable */

I think I only used document$ as a replacement for DOMContentLoaded and location$ to see a navigation change before the page is reloaded.

[k4lizen]

yup that works! thanks a bunch.