Skip to content

README.md

Latest commit

 

History

History
61 lines (44 loc) · 3.61 KB

README.md

File metadata and controls

61 lines (44 loc) · 3.61 KB
Raw

MagicFrame Wiki

Welcome to the MagicFrame wiki! This documentation provides detailed information about MagicFrame, a lightweight iframe redirection solution with query parameter preservation and dynamic title updates.

📚 Contents

🔍 What is MagicFrame?

MagicFrame is a simple yet powerful HTML/JavaScript solution that creates a full-page iframe which:

  1. Redirects to a specified target URL
  2. Preserves all query parameters and hash fragments from the original URL
  3. Updates the page title to match the title of the loaded content

This creates a seamless experience where users can access content from another domain while maintaining the original URL structure and getting appropriate page titles.

🎯 Key Use Cases

MagicFrame is particularly useful for:

  • URL Shorteners with Parameter Preservation: Create short URLs that redirect to longer ones while maintaining all parameters
  • White-Labeled Services: Present third-party services under your own domain
  • Content Embedding: Embed external content while keeping your domain in the address bar
  • Redirect Layers: Add analytics or tracking while preserving the complete user experience

🚀 Getting Started

For basic setup and usage, refer to the README in the main repository.

For more detailed information, explore the wiki sections linked above.

📊 How It Works (Overview)

┌─────────────────────┐      ┌─────────────────────┐      ┌─────────────────────┐
│                     │      │                     │      │                     │
│  User visits URL    │──────►  MagicFrame loads   │──────►  Target site loads  │
│  with parameters    │      │  iframe with URL    │      │  in iframe          │
│                     │      │  parameters         │      │                     │
└─────────────────────┘      └─────────────────────┘      └──────────┬──────────┘
                                                                     │
                                                                     │
                             ┌─────────────────────┐                 │
                             │                     │                 │
                             │  Page title updated ◄─────────────────┘
                             │  to match iframe    │
                             │  content            │
                             └─────────────────────┘
  1. User visits your MagicFrame URL with parameters (e.g., yourdomain.com/path?param=value#hash)
  2. MagicFrame loads a full-page iframe pointing to your configured target URL
  3. All query parameters and hash fragments are appended to the target URL
  4. Once the iframe content loads, MagicFrame updates the page title to match the iframe content

For a more detailed technical explanation, see the Architecture Overview.