Some test text!




Details of instantiation
WebViewer's iframe
Loading WebViewer from another domain

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);

viewerElement.addEventListener('ready', function() {
  // API functions are now ready to be called on myWebViewer

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
Before calling functions on the PDFTron.WebViewer object you'll need to wait for the ready event to be fired.

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.

linkLoading WebViewer from another domain

It's possible to load WebViewer's lib folder from another domain by setting the path constructor option to an absolute URL (e.g. This will work, however there are some considerations to take into account because the iframe page is no longer on the same origin.

When you call an API on the WebViewer object, behind the scenes it reaches into the iframe and calls functions in that context. When the iframe is on a different domain then cross origin script access applies and WebViewer will no longer be able to call functions inside the iframe.

For example none of the following will work:

var viewer = new PDFTron.WebViewer({...}, viewerElement);

// none of these work!
viewer.getInstance(); // returns undefined
// etc...

In this case you have two options to interact with and customize WebViewer.

  1. Run your custom code in a config file. Config files are loaded and executed inside the iframe so they run in the iframe's context and have no problem accessing the APIs.

  2. Us the window postMessage API to communicate between your page and the iframe. For example you could send a message to the iframe with the value being the URL to the document you want to load. The iframe would handle this message in a config file and call readerControl.loadDocument to load the document from the new URL.

Get the anwsers you need: Support


Details of instantiation
WebViewer's iframe
Loading WebViewer from another domain