How to use $document in custom js?

[naterichman]

I'm trying to follow the doc here and I'm not able to get the following to work:

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

I've tried both including a script with <script src='...'> and directly putting my javascript inside the <script>//code</script tags. Either way I get

Uncaught ReferenceError: document$ is not defined

Am I missing something about how to use this?

[kamilkrzyskow]

Hello @naterichman,
please provide a minimal reproduction, so that we're on the same page on what you're trying to do and so that we can reproduce the error.

As for further debugging tips, the code block you provided is supposed to go into your extra.js file.
First the bundle.js needs to run to declare the window.document$ observable, then you can access it in a custom extra script loaded after the bundle.js. The examples you provided indicate you've used the <script> tags inside your Markdown file or somewhere else that runs before the bundle.js initialized. window is the global scope, so you can access it with document$ without specifying window, only the declaration required that.

https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript
https://github.com/squidfunk/mkdocs-material/blob/9.5.14/material/templates/base.html#L251-L256

mkdocs-material/src/templates/base.html

Lines 433 to 441 in 92b3e1b

	<!-- Theme-related JavaScript -->
	{% block scripts %}
	<script src="{{ 'assets/javascripts/bundle.js' | url }}"></script>
	<!-- Custom JavaScript -->
	{% for script in config.extra_javascript %}
	{{ script | script_tag }}
	{% endfor %}
	{% endblock %}

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

Lines 308 to 318 in 92b3e1b

	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 */

[squidfunk]

You cannot use document$ inside Markdown in script tags, because it is only available at the end of the rendered page. This is because the JavaScript is initialized at the bottom of the body element (which is a best practice to improve rendering times). A better idea is to move your JavaScript into an additional file, which ensures correct order. Alternatively, you can use the following in your Markdown file (not recommended for third-party libraries):

document.addEventListener("DOMContentLoaded", () => {
  // Your code
})

[naterichman]

Sorry for the delay, here is a reproduction
9.5.17-extra_js.zip

The additional file method is alright, but I'd like to not have to include my additional JS if I only want it applied on 1 or two pages out of 10s or 100s. I was basing what I was doing out of this issue which mentioned including a script tag inline with the markdown.

I realize now that is not possible, so my question is, even though the event listener for DOMContentLoaded is not recommended, is there any issue with using it, and if so, is there a better method?