I want to use window or document to return path of the current page default Astro.site.pathname isn't working right or proper documentation isn't available.

My question is how to use document or window properly in Astro JS?

Thanks in advance!

I want to use window or document to return path of the current page default Astro.site.pathname isn't working right or proper documentation isn't available.

My question is how to use document or window properly in Astro JS?

Thanks in advance!

• javascript
• node.js
• reactjs
• jsx
• astrojs

• 1 Please note that is:inline is not needed and have unexpected drawbacks, see answer with simple <script> – wassfila Commented Dec 18, 2022 at 12:17

4 Answers 4

You need to write the script inside <script is:inline></script> if you want to use things like window or document. This way Astro won't touch your JS and include it directly on the HTML. The JS positioned on the top of the page between --- --- will be executed at build time.

You can also access the current path name from an Astro component using const { pathname } = Astro.url.

Script tag

<script> tag as mentioned in the documentation is enough for using document and window as it is meant for client side Javascript

https://docs.astro.build/en/guides/client-side-scripts/#using-script-in-astro

Inline Script

<script is:inline> is not recommended if you do not need it because it's intended to avoid bundling your script, which is rarely needed. And if you use the component containing that script, in let's say 10 instances (e,g, 10 Cards), you'll have that script 10 times duplicated, so results in loading performance impact.

https://docs.astro.build/en/guides/client-side-scripts/#script-bundling

Example

This example shows how to create multiple client side counters in pure Astro, which is similar to pure html. Note the usage of document in document.querySelectorAll(".card")

more details in https://docs.astro.build/en/core-concepts/astro-components/

---
//Astro Front matter => Javascript
---
<!-- html -->

<!-- style -->

<!-- script -->
<script>
    console.log("int cards")
    const cards = document.querySelectorAll(".card")
    cards.forEach(card => {
        const plus = card.querySelector('button.plus')
        const minus = card.querySelector('button.minus')
        const value = card.querySelector(".value")
        plus.onclick  = ()=>{value.textContent = parseInt(value.textContent) + 1}
        minus.onclick = ()=>{value.textContent = parseInt(value.textContent) - 1}
    });
</script>

here a link to the full example repo project:

https://github.com/MicroWebStacks/astro-examples#04_client-counters

and here a link to a direct StackBlitz project pointed on that repo

https://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/04_client-counters

By default, Astro will process, optimize, and bundle any and tags that it sees on the page. You can opt-out of this behavior with the is:inline directive.

– Docs

You can use the is:inline directive like so in your .astro components:

---
// static build only
---

<script is:inline>
    console.log(document, window)
</script>