navigation

AJAX-based Single Page Application (SPA) navigation engine for seamless page transitions.

Functions

Function
Description
Example

ajax

Initialize SPA navigation engine

dphelper.navigation.ajax()

load

Load page via AJAX

dphelper.navigation.load('/about')

Description

Complete SPA navigation solution:

  • AJAX Loading - Load pages without refresh

  • History Management - Browser back/forward support

  • Hash Support - Scroll to hash elements

  • XSS Protection - HTML sanitization

Usage Examples

Initialize SPA Navigation

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  dphelper.navigation.ajax();
});

// Now all anchor links will use AJAX navigation
// <a href="/about">About</a> will load without refresh

Manual Page Load

How It Works

  1. Initialization - ajax() binds all anchor tags

  2. Click Interception - Links are converted to AJAX handlers

  3. Content Loading - Page content fetched via fetch API

  4. Content Injection - Body content replaced (sanitized)

  5. History Update - Browser history updated with pushState

HTML Structure

Hash Navigation

Security Features

  • XSS Prevention - HTML content is sanitized

  • Same-origin - Only same-origin URLs allowed

  • Open Redirect Prevention - Validates URL origins

Advanced Usage

Conditional Navigation

Loading State

Details

  • Author: Dario Passariello

  • Version: 0.0.2

  • Creation Date: 20260223

  • Last Modified: 20260223

  • Environment: Client-side only (browser)


Automatically generated document

Last updated