Code Example - Embedding Capture in IFrame

This example shows how to run capture embedded in an IFrame. The default capture menu is hidden by using the url parameter “hidemenu=true” and the default on-exit warning is disabled by the parameter “mode=capture”.

To run the following example code, you have to replace %DOCUMENT_TOKEN% with a valid document token of yours.


<!DOCTYPE html> <html> <head> <title>HrCapture IFrame Example</title> <script type="text/javascript"> var myCaptureHost = ""; var isDirty = false; function initialize() { //Add Post-Message Listener **/ window.addEventListener("message", message_received, false); } function document_commit() { //Trigger document commit **/ document.getElementById('hrcapture-frame').contentWindow.postMessage('document.commit',myCaptureHost); } function document_reload() { // If document is dirty, display confirm message if (isDirty && !confirmExit()) { return; } // Reload Iframe var iSrc = document.getElementById('hrcapture-frame').src; document.getElementById('hrcapture-frame').src = iSrc; } function confirmExit(){ if (confirm("Unsaved changed - you really want to quit?")) { return true; } return false; } function message_received(event) { if (event.origin == myCaptureHost) { if ( == "capture.submitted") { //document was saved console.log("was saved"); } else if ( == "capture.isDirty") { //document was set dirty isDirty = true; //add on-close-listener window.onbeforeunload = confirmExit; } else if ( == "capture.isClean") { //document was saved/reset isDirty = false; //remove on-close-listener window.onbeforeunload = null; } } } </script> </head> <body onload="initialize();"> <div style="padding: 10px; text-align: right;"> <button onclick="document_reload()">Reload</button> <button onclick="document_commit()">Commit</button> </div> <div style="text-align: center;"> <iframe id="hrcapture-frame" height="800px" width="90%" src=""></iframe> </div> </body> </html>