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>