> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/events/onpageload.md).

# onPageLoad()

The `onPageLoad` function lets you execute your javascript codes when certain pages or routes are accessed in a browser. It supports exact route matches, root index files, and wildcard

***

**Usage Syntax**

```javascript
onPageLoad(page, callback);
```

* `**page**`:
  * A string or an array of strings representing the route(s) to match.
  * Examples:
    * `/admin/` (matches `/admin/` and its index file).
    * `/admin/*` (matches all pages under `/admin/`).
    * `/` (matches the root page `/`).
* `**callback**`:
  * A function that gets executed when the specified page is loaded.
  * The callback receives an object with the following properties:
    * `route`: An array of the route segments.
    * `query`: A parsed object of the URL query string.
    * `title`: The current page title.
    * Additional properties of the `window.location` object.

***

**Examples**

{% stepper %}
{% step %}

## Trigger on Root Page Load

```javascript
onPageLoad('/', (info) => { 
    console.log('Root page loaded:', info); 
});
```

* Matches the root page `/` or `/index.html`.
  {% endstep %}

{% step %}

## Trigger on a Specific Page

```javascript
onPageLoad('/about.html', (info) => { 
    console.log('About page loaded:', info); 
});
```

* Matches `/about.html`.
  {% endstep %}

{% step %}

## Trigger on All Pages in a Folder

```javascript
onPageLoad('/admin/*', (info) => { 
    console.log('Admin area loaded:', info); 
});
```

* Matches any page under `/admin/`, e.g., `/admin/settings.html`, `/admin/users.php`.
  {% endstep %}

{% step %}

## Trigger Only on a Folder Index

```javascript
onPageLoad('/admin/', (info) => { 
    console.log('Admin folder index page loaded:', info); 
});
```

* Matches `/admin/` and its index files ( `/admin/index.html`, `/admin/index.php`).
  {% endstep %}

{% step %}

## Trigger on Multiple Pages

```javascript
onPageLoad(['/home.html', '/about.html', '/contact.html'], (info) => { 
    console.log(`Page ${info.route.join('/')} loaded:`, info); 
});
```

* Matches `/home.html`, `/about.html`, and `/contact.html`.
  {% endstep %}

{% step %}

## Using Wildcard and Specific Pages Together

```javascript
onPageLoad(['/dashboard/*', '/settings.html'], (info) => { 
    console.log('Dashboard or settings page loaded:', info); 
});
```

* Matches all pages under `/dashboard/` and the specific `/settings.html` page.
  {% endstep %}
  {% endstepper %}

***

**Callback Information**

The callback function receives an object with the following properties:

* `**route**`: An array of route segments.
  * Example: For `/admin/settings`, `route` would be `['admin', 'settings']`.
* `**query**`: An object of parsed query parameters.
  * Example: For `?name=John&age=30`, `query` would be `{ name: 'John', age: '30' }`.
* `**title**`: The current page title.
* Additional `window.location` properties:
  * Example: `pathname`, `host`, `origin`, etc.

***

**Advanced Example**

```javascript
onPageLoad(['/profile/*', '/dashboard.html'], (info) => { 
    console.log('Loaded Page Info:', info); 

    if (info.route[0] === 'profile') { 
        console.log('Profile section detected:', info.route[1]); // Specific profile segment 
    } 

    if (info.query.ref) { 
        console.log('Referred by:', info.query.ref); // Query parameter handling 
    } 
});
```

* Matches `/profile/123`, `/profile/settings`, and `/dashboard.html`.
* Extracts query parameters and specific segments dynamically.