Embed a document viewer with iframe and PostMessage.
Use Rasterex Canvas from any HTML-capable application—Django, ASP.NET, Laravel, Rails, Spring, PHP or a static site—through the browser’s standard iframe and PostMessage APIs.
Your backend does not need to be JavaScript.
The integration runs between the browser page and the Canvas iframe. Your backend stack serves the page, controls authentication and document access, and stores your workflow records. Browser JavaScript sends documented messages to Canvas and receives its events.
Separate browser messaging from server responsibilities.
Host HTML page
Renders the iframe and uses PostMessage with the configured Canvas origin.
Canvas iframe
Receives documented view payloads and emits loading events back to the host page.
Any backend
Owns users, authorization, document URLs and business data independently of browser messaging.
Load, then send the first view payload.
Keep Canvas URL and origin in one configuration location. Register handlers before assigning iframe.src, then validate every incoming origin.
Initialize Canvas and open a document
01const CANVAS_URL = "https://canvas.example.com";02const FILE_URL = "https://files.example.com/drawing.pdf";03const viewerOrigin = new URL(CANVAS_URL).origin;04const iframe = document.getElementById("rasterex-canvas");05 06function openFile() {07 iframe?.contentWindow?.postMessage(08 { type: "view", payload: { fileUrl: FILE_URL } },09 viewerOrigin,10 );11}12 13window.addEventListener("message", (event) => {14 if (event.origin !== viewerOrigin) return;15 if (event.data?.type === "progressStart") console.log("Canvas began loading");16 if (event.data?.type === "progressEnd") console.log("Canvas finished loading");17});18 19// Register load before assigning src so a fast load cannot be missed.20iframe?.addEventListener("load", () => window.setTimeout(openFile, 500));21iframe.src = CANVAS_URL;Verify origin, load order and Canvas confirmation.
- Canvas URL and origin are centrally configured.
- The iframe load handler is attached before iframe.src is assigned.
- The first view message uses the explicit Canvas origin, not a wildcard.
- Incoming messages are ignored unless event.origin matches the Canvas origin.
- progressStart confirms Canvas received the view message; progressEnd completes the loading state.
iframe and PostMessage answers.
Does iframe and PostMessage work with Django, ASP.NET or other backend stacks?
Yes. The iframe and PostMessage exchange runs in the browser page, so it can be hosted by any application that renders HTML and runs browser-side JavaScript. The backend retains authentication, document access and business data.
What is the first Canvas message?
The documented initialization flow sends a view message with a fileUrl payload after the Canvas iframe has loaded and had a short boot delay.
Why must the Canvas origin be explicit?
Use the configured Canvas origin as the postMessage target and validate incoming event.origin against it. Do not use a wildcard target origin for this integration.
What Canvas events confirm loading?
The documented initialization page uses progressStart and progressEnd. progressStart confirms Canvas received the initial view message.