Example
The following example shows a typical online viewer intgration with a web
application.
<!DOCTYPE html> <html> <head> </head> <style> iframe { width: 100%; height: 100%; position: absolute; top: 50px; left: 0; } </style> <body> <div class="inputs"> <input type="text" placeholder="access token" id="accessToken"> <input type="text" placeholder="document guid" id="documentGuid" value="8c68619e-1d94-4040-9838-03856316b365"> <button id="go"> GO </button> </div> <script> const goButton = document.getElementById('go'); const viewerElem = document.createElement('iframe'); viewerElem.src = "https://wap.sealdoc.com/mobile/v"; goButton.onclick = () => { document.body.appendChild(viewerElem); window.addEventListener('message', (event) => { if (!event.data || !event.data.id) { return; } switch (event.data.id) { case 'VIEWER:READY': const accessToken = document.getElementById('accessToken').value; const documentGuid = document.getElementById('documentGuid').value; viewerElem.contentWindow.postMessage({ id: 'PARENT:INIT', context: { accessToken, documentGuid } }, '*'); break; case 'VIEWER:INVALID_ACCESS_TOKEN': viewerElem.contentWindow.postMessage({ id: 'PARENT:SET_ACCESS_TOKEN', context: { accessToken: 'new_access_token' } }, '*'); break; case 'VIEWER:DOCUMENT_NOT_FOUND': break; case 'VIEWER:NO_PERMISSION_FOR_RECIPIENT': break; case 'VIEWER:PERMISSION_EXPIRED': break; case 'VIEWER:PRINT_PERMISSION_REQUEST': break; case 'VIEWER:UNEXPECTED_ERROR': break; } }); }; </script> </body> </html>