MagicFrame

A lightweight, zero-dependency solution for iframe redirection with enhanced functionality:

• Preserves query parameters and hash fragments
• Automatically updates page title to match the iframe content
• Simple configuration with a single variable

🚀 Overview

MagicFrame creates a seamless iframe wrapper that redirects visitors while maintaining the original URL parameters and hash fragments. This is particularly useful for:

• Creating branded URL wrappers for third-party content
• Implementing URL shorteners with parameter pass-through
• Setting up redirect pages that preserve the complete URL structure
• Embedding external content while maintaining browser title synchronization

✨ Features

• Full-page iframe - Creates a borderless, full-window iframe experience
• Query parameter preservation - Automatically passes all query parameters to the target URL
• Hash fragment support - Maintains hash fragments for deep linking and SPA navigation
• Dynamic title synchronization - Updates the page title to match the loaded content
• Minimal footprint - Entire solution in a single HTML file (~1KB)
• Zero dependencies - No external libraries or frameworks required

🔧 Quick Start

1. Download or clone this repository
2. Open index.html in a text editor
3. Modify the url variable to your desired target URL:

   var url = 'https://your-target-url.com';

4. Upload to your web server or hosting service
5. That's it! Your MagicFrame is ready to use

📋 Usage Examples

Basic Redirection

If you set:

var url = 'https://example.com';

When a visitor accesses:

https://your-domain.com/magicframe/?user=123&view=dashboard#settings

They will be redirected to:

https://example.com/?user=123&view=dashboard#settings

And the page title will update to match example.com's title.

Common Use Cases

• Content Embedding: Embed third-party content while maintaining your domain
• URL Shortening: Create short URLs that preserve all parameters when redirecting
• White Labeling: Present external services under your own domain
• Analytics Tracking: Add a redirect layer for analytics while preserving the user experience

⚙️ Configuration

MagicFrame is configured by modifying the url variable in the index.html file:

var url = 'https://your-target-url.com';

Advanced Configuration

For more advanced usage scenarios, check out the Wiki which includes:

• Architecture Overview
• Security Considerations
• Browser Compatibility
• Troubleshooting

🔒 Security Considerations

When using iframes to embed external content, be aware of:

• Same-Origin Policy: Browsers restrict interactions between different origins for security
• X-Frame-Options: Some websites prevent being displayed in iframes
• Content Security Policy: CSP settings may restrict iframe usage

For more details, see the Security Considerations page in the wiki.

🌐 Browser Compatibility

MagicFrame works in all modern browsers that support iframes. For specific compatibility information, see the Browser Compatibility page.

📄 License

MagicFrame is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Feel free to submit a pull request or open an issue if you have suggestions for improvements.