Embedding IceViewer HTML5 in your website

IceViewer HTML5 has built-in support to embed the viewer into your website.

The most common way of embedding is using an IFRAME, and using the Profile which hides the IceViewer HTML5 User Interface, only displaying the thumbnails and the document itself.

The following code example demonstrates how to display a document using IFRAME HTML tags as sown in the following example:

<html>

<head>

<style>

body{display: flex;flex-direction: column;align-items: center;}

.iframe{width:800px;height:550px;margin:15px;background-color:#fafafa;}

.header {display: flex;justify-content: center;}

.header > div {font-size: 16px;font-weight: bold;padding: 10px;border-bottom: 1px solid rgba(0,0,0,0.3);}

</style>

</head>

<body>

<div class="header">

<div>

IceViewer Embedding Demonstration

</div>

</div>

<div>

<iframe class="iframe" src="https://192.168.0.41/?DocumentID=c:\iceviewer\1.tif&profile=0"></iframe>

</div>

</body>

</html>

The URL https://192.168.0.41/?DocumentID=c:\iceviewer\1.tif&profile=0 must be your IceViewer HTML5 website URL, and the DocumentID must point to the absolute path of the document you would like to open from the server.

The Profile=0 specifies a built-in IceViewer HTML5 Profile that is designed to embed IceViewer HTML5.

Create a new HTML file with the above HTML code, or add the code to your existing webpage, then visit the webpage in the browser. With the code above, the embedding must look like the following:

In most cases, developers would like to implement their own user interface and functionality for the IceViewer HTML5, for which purpose we recommend using the IceViewer HTML5 JavaScript API, which is an extensive JavaScript API for IceViewer HTML5 functions, document management, page operations, annotations, and more.

When using the JavaScript API, please make sure that your webpage and the IceViewer HTML5 is running on the same IP address, or domain name. If the IP address or domain name is different, the browser will block the JavaScript API due to CORS (Cross-origin resource sharing) security policies. CORS policies are enabled in all modern browsers, and their purpose is to block requests and access resources from external webpages.

For navigating between the pages using the IceViewer HTML5 JavaScript API, you’ll have to add two buttons, and a simple JavaScript code to call the API:

<div>

<div id="next_p">Next Page</div>

<div id="prev_p">Prev Page</div>

</div>

<script>

var iframeID = "IceViewer";

document.getElementById("next_p").addEventListener("click", function(){

let success = document.getElementById(iframeID).contentWindow.api_nav_next();

console.log(success);

});

document.getElementById("prev_p").addEventListener("click", function(){

let success = document.getElementById(iframeID).contentWindow.api_nav_previous();

console.log(success);

});

</script>

When the user clicks on the next_p or prev_p elements, the IceViewer HTML5 will navigate to the next/previous page.

For more information about the JavaScript API, please refer to the IceViewer HTML5 JavaScript API section of this document.