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

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

1. Trigger on Root Page Load

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

• Matches the root page / or /index.html.

---

1. Trigger on a Specific Page

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

• Matches /about.html.

---

1. Trigger on All Pages in a Folder

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

• Matches any page under /admin/, e.g., /admin/settings.html, /admin/users.php.

---

1. Trigger Only on a Folder Index

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

• Matches /admin/ and its index files (/admin/index.html, /admin/index.php).

---

1. Trigger on Multiple Pages

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

• Matches /home.html, /about.html, and /contact.html.

---

1. Using Wildcard and Specific Pages Together

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

• Matches all pages under /dashboard/ and the specific /settings.html page.

---

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

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.