Some test text!

Config files

In this document
chevron_rightUseful events
chevron_rightPassing custom data
chevron_rightAccessing outer page inside the iframe

WebViewer fundamentals explains how WebViewer creates the UI app inside an iframe, so that Core namespaces and classes are encapsulated. The iframe window and document object are still accessible through contentWindow and contentDocument, but it can still be tricky to run scripts or listen to events happening inside the iframe.

WebViewer provides an option referred to as a "config file". It's just an ordinary JavaScript file, but it will be executed in the context of the iframe. This gives you easy access to the Document, DocumentViewer and AnnotationManager objects (among others) which can allow you to make more complicated customizations.

To instantiate WebViewer with a config file you just need to set the config option in the WebViewer constructor. For example:

var myWebViewer = new PDFTron.WebViewer({
  initialDoc: "mydoc.pdf",
  config: "path/to/my/config/file.js" // relative to your HTML file
}, viewerElement);

linkUseful events

The config file is executed even before the core objects are instantiated, so you won't be able to call core functions immediately. You can listen for events on the HTML document object that will notify you at key points.

The first important one is the viewerLoaded event. viewerLoaded will be fired after app has been rendered, and at this point you'll be able to access the docViewer variable before the document has loaded. For example:

$(document).on('viewerLoaded', function() {
  docViewer.setMargin(20);
  docViewer.on('fitModeUpdated', function(e, fitMode) {
    console.log('fit mode changed');
  });
});

Another important event is documentLoaded. Once documentLoaded has fired you can access Document as well as functions related to the page number on ReaderControl, DocumentViewer and AnnotationManager. For example:

$(document).on('documentLoaded', function() {
  var doc = docViewer.getDocument();
  doc.loadThumbnailAsync(0, function(thumb) {
    $('#myThumbnailDiv').append(thumb);
  });

  var annotManager = docViewer.getAnnotationManager();
  var rectangle = new Annotations.RectangleAnnotation();
  rectangle.PageNumber = 2;
  rectangle.X = 100;
  rectangle.Y = 100;
  rectangle.Width = 250;
  rectangle.Height = 250;
  rectangle.Author = annotManager.getCurrentUser();
  annotManager.addAnnotation(rectangle);

  docViewer.displayLastPage();
});

linkPassing custom data

Sometimes you might want to send custom data from the "outer" page (with the PDFTron.WebViewer constructor) to the "inner" page (your config file). To do this you can use the custom option in the WebViewer constructor. The property expects a string value. So for example to pass an object:

var myObj = {
  startPage: 10
};

var myWebViewer = new PDFTron.WebViewer({
  custom: JSON.stringify(myObj)
}, viewerElement);

Then inside the config file you access this data as follows:

var custom = JSON.parse(window.ControlUtils.getCustomData());
console.log(custom.startPage) // outputs 10

$(document).on('documentLoaded', function() {
  var docViewer = readerControl.docViewer;
  docViewer.setCurrentPage(custom.startPage);
});

linkAccessing outer page inside the iframe

If you want to access the outer page from inside the iframe, for example from code in your config file, you can access the parent window using window.parent. So if you defined an API that's loaded on your HTML page, you could access it from inside the iframe like window.parent.myApi.myFunction().