Skip to main content

Link — Viewerframe Mode

Now construct your ViewerFrame mode link dynamically. For example, to share a PDF in fullscreen mode:

| Feature | Standard Iframe | ViewerFrame Mode Link | | :--- | :--- | :--- | | | Loads initial URL only | Changes content/mode dynamically | | Parent Communication | Limited (Cross-origin restrictions) | Often includes postMessage API hooks | | URL Structure | src="document.pdf" | src="viewer.html?mode=link&target=doc.pdf&ui=compact" | | Session Persistence | Resets on reload | Maintains viewing preferences (zoom, rotation, annotations) | viewerframe mode link

This comprehensive guide will break down what a ViewerFrame mode link is, how it differs from standard embedding, its technical architecture, and the best practices for leveraging it in your projects. At its core, a ViewerFrame mode link is a specialized URL parameter or structured hyperlink designed to force an embedded viewer (such as an iframe, a custom video player, or a document viewer) to display content in a specific "mode." Unlike a standard hyperlink that replaces the entire browser window, a ViewerFrame mode link targets a defined frame container, instructing it to load a particular asset—be it a PDF, an image, a 360° panorama, or a video stream—while maintaining the surrounding UI. Now construct your ViewerFrame mode link dynamically

https://viewer.myapp.com/?mode=zoom&link=https://cdn.com/photo.jpg&toolbar=hidden&maxZoom=400% https://viewer

switch(mode) case 'fit': viewerFrame.src = https://embed-service.com/fit?url=$encodeURIComponent(contentLink) ; break; case 'fullscreen': viewerFrame.src = contentLink; viewerFrame.requestFullscreen(); break; default: viewerFrame.src = contentLink;