Some test text!

WebViewer

In this document
chevron_rightDetails of instantiation
chevron_rightWebViewer's iframe

When you download the WebViewer package, it contains four main components:

webviewer.js is the main entry point of this package that uses UI and Core to render the WebViewer app inside an iframe. So, after importing webviewer.js, the WebViewer app (composed of UI and Core) can be instantiated by using the PDFTron.WebViewer constructor. If you look at the viewing sample, you will see that the app is created inside an iframe.

linkDetails of instantiation

The intantiation can be summarized in one sentence.

Instantiation === Webviewer creating the iframe-wrapped app based on the options

For example, for this code:

var myWebViewer = new PDFTron.WebViewer({
  initialDoc: 'mydoc.pdf',
  ui: 'legacy'
}, viewerElement);

the following steps will be executed:

  1. The constructor is telling webviewer.js to render the legacy UI app in viewerElement
  2. The legacy UI sees the initialDoc option and calls loadDocument function from Core
  3. Core processes the myDoc.pdf document and renders it in the legacy UI

linkWebViewer's iframe

It's important to remember that WebViewer's iframe is a completely separate window, isolated from your own HTML page. Inside this window is where you can directly access the DocumentViewer and AnnotationManager objects and many others.

The PDFTron.WebViewer API provides the getInstance function which returns an object with a number of helpful the APIs. So you can call myWebViewer.getInstance().setCurrentPageNumber(5); to navigate the viewer to page 5.

The functions on myWebViewer.getInstance() and the events on viewerElement are just a convenient subset of the functions and events that can be used directly from the iframe window. They also abstract away the details of interacting with the iframe so you don't have to worry about it.

If you did want to worry about it, you would need to get a reference to the window or document object of the iframe. You can do that by calling:

var iframeWindow = viewerElement.querySelector('iframe').contentWindow;
var Annotations = iframeWindow.Annotations;

var iframeDocument = viewerElement.querySelector('iframe').contentDocument;
var uiApp = iframeDocument.getElementById('app');
You can also check out the config files guide for more examples of customizations inside the WebViewer iframe.
If the WebViewer library is on a different domain from your HTML page you can use the window postMessage API to communicate between your page and the iframe.