Viewer Iframe Control

The iframe control JavaScript module allows your page to send information to and receive information from an HTML 5 Viewer embedded into your page.

A simplified state reporting API, that works for both Flash 2.0 and HTML 5 digital editions, is available at Iframe State Reporting API.


To add the viewer to a page, you'll need to have an <iframe> element in the <body> element. Be sure to leave the src attribute empty, <iframe id= "myFrame"></iframe>.

Then add a couple things to the <head> element.

Add the following line to the <head> element of your HTML:

<script src="//"></script>

and then add your customized script that starts the process. It will look something like:

<script src="//"></script>


       var options = {
       issueId: 12345
       $(document).ready(function() {
            IframeViewer.start($('iframe'),options, function() {

            // Viewer is initialized


You may need to change '' to your masked domain if applicable. You'll need to change the issue ID to your issue, or set the publication ID instead like:

   var options = {
       publicationId: 12345,
       latest: 1

Note: If you provide the iframe with a valid URL to the viewer, the publicationId and issueId parameters may be omitted.

If you have more than one <iframe> on the page, you'll need to use a more specific query to find it, rather than $('iframe'). If the ID of the iframe is "viewer", then you'd use $('iframe#viewer'), for example.


issueId – specify the ID of the issue to display

publicationId – specify the ID of the publication of the issue to display. This parameter should not be set if issueId is set, and must be set with "latest" set to "true"

latest – set to "1" when specifying the display of the latest active issue of the specified publication (publicationId required when using this option)

page – the internal sequence number of the page to be displayed on the screen at once. If unset, automatically select optimum number of pages to display based on containing window/frame. Explicit options are "1" or "2".

domain – automatically determined from the current domain, unless provided

subscriptionAction – defaults to 'redirect', which redirects the entire page to the subscription url. A value of 'custom' makes nothing happen automatically, and you must handle the data object for 'subscribeUrl', which is sent to your callback function.

urlAction – defaults to 'open', which opens the URL in its target automatically. If you specify a value of 'custom' you must handle the data object for 'openUrl' for any url links with targets that start with 'bt_' (such as 'bt_speciallink') or '_self', which object is sent to your callback function. Other targets will still be handled automatically.

disableRollovers – defaults to 'false'. A value of 'true' will prevent default rollovers from displaying.

disableToolbar – defaults to 'false'. A value of 'true' will prevent the display of top and bottom menu bars on the page.


The Commands below can be used to control the viewer from your interface in a custom fashion.

start – starts the viewer. Must pass in the URL of the iframe, iframe element, issue ID, custom options array, and an optional callback that will be called after the viewer is initialized

updateState – update the state of the application. Mainly used with history and hashtags

nextPage – go to next page

previousPage – go to previous page

firstPage – go to first page

lastPage – go to last page

gotoPage – go to page specified. This is a number corresponding to the position of the page in the issue, and not the page name

resize – notify the viewer that the size of the iframe has changed

changeView – change to a different page view (single / spread)

showScrubber – show the page change scrubber

showSearch – show the search interface

showPrint – show the print interface

registerDataChangeCallback – register a callback function that will be called every time the data changes. See Data Objects section for list

registerReceiveMessageCallback – register a callback function that will be called when a containing page needs to alert this page to changes

startIssueListBrowser – start the issue list browser

startArchiveBrowser – start the archive browser

startContentsBrowser – start the contents browser

startResourceBrowser – start the advertiser browser

openUrl - open a URL in a platform-agnostic way.  Must pass in the URL and optionally a target name.

Data Objects

The Data Objects below can be used (after registering a function with registerDataChangeCallback) to listen to changes in data and respond to them, such as when the page changes. (Many of these are handled automatically already.) For example:

IframeViewer.registerDataChangeCallback (function(e) { 

pageNumber – internal sequence number of page currently being displayed. In a 2-page spread, this contains the sequence number of the left most page

pageCount - number of total pages in the current issue (not counting presentation pages, barn doors, gatefolds, foldouts, slideout pages, tall pages, or interstitial pages)

pageNames – names of the currently displayed pages in an array

issueName – name of the current issue

issueId – current issue ID

publicationName – name of the current publication

showMenu – info on whether or not the menu should be shown (toggle / show / hide / disable / enable). If disabled, it cannot be displayed

menuBackground – background color for menu

menuForeground – foreground color for menu

view – current Browser or issueViewer (issueViewer, contentsBrowser, etc)

viewType – current page view (spread / single)

hasArchive – has an archive to view

hasContents – has contents to view

hasAdvertisers – has advertisers to view

hasPdf – has a PDF to download

hasPrint – can print

subscribeUrl – url to redirect to for subscription

openUrl – url to open, with url and target information

iphone_icon_57 – 57x57 IOS icon

iphone_icon_72 – 72x72 IOS icon

iphone_icon_114 – 114x114 IOS icon

iphone_icon_144 – 144x144 IOS icon

iphone_apple_identifier – ID in the Apple App Store for iPhone version of viewer

ipad_apple_identifier – ID in the Apple App Store for iPad version of viewer

pageSizeData – provides an object reporting the current page dimensions (width, height, top, bottom, left, right) and zoom scaling.

name :"pageSizeData" 
value: {
    "bottom": Location of the bottom of the page in pixels,
    "currentScale": Current zoom scale,
    "height": Page height in pixels,
    "left": Location of the left side of the page in pixels,      
    "normalScale": Page default zoom amount,
    "right": Location of the right side of the page in pixels, 
    "top": Location of the top of the page in pixels,
    "width": Page width in pixels

rolloverData – provides an object reporting the current rollover dimensions (width, height), position (top, left), rollover sku, and other related rollover data.

name :"rolloverData" 
value: {
    "boxfillColor": Rollover background color, 
    "brand_id": Brand ID,
    "brand_name": Brand name,
    "description": Rollover description copy, 
    "descriptionColor": Rollover description text color,  
    "description_long": Long description,
    "featured": Featured,
    "footer": Rollover footer data,
    "height": Calculated rollover height,
    "id": Rollover ID,
    "imageURL": Rollover image URL,
    "imageURL_large": Large rollover image URL,
    "img_src": Rollover image URL,
    "isWishListAdded": True if the rollover item has been added to
the wishlist,
    "jpg_height": Image height,
    "jpg_width": Image width,
    "left": Calculated rollover position from the left side of the
    "link_id": Link ID,
    "linksColor": Link color,
    "mobileLinkText": Link text,
    "outlineColor": Rollover outline color,
    "page_id": Page ID,
    "price": Price,
    "priceColor": Price text color,
    "publication_id": Publication ID,
    "purchase_url": Purchase URL,
    "rollover_sku": The reported SKU for the rollover,
    "shadow": If true, the rollover has a shadow. No shadow if false,
    "sku_category_id": SKU category ID,
    "sku_category_name": SKU category name,
    "sticky": If false, the rollover will follow the mouse cursor. If
true, the rollover will remain in one spot,
    "target": Target window on link click, "title": Rollover title,
    "titleColor": Rollover title text color
    "top": Calculated rollover position from the top of the page,    
    "width": Calculated rollover width,
    "wishlist": Wishlist link text