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 = "http://cvlizer.joinvision.com";
	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 (event.data == "capture.submitted") {
				//document was saved
				console.log("was saved");
			}
			else if (event.data == "capture.isDirty") {
				//document was set dirty
				isDirty = true;
				//add on-close-listener
				window.onbeforeunload = confirmExit;
			}
			else if (event.data == "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="http://cvlizer.joinvision.com/capture/Semanticgui.html?language=de&hidemenu=true&mode=capture&token=%DOCUMENT_TOKEN%"></iframe>	
	</div>
</body>
</html>