Viewer JavaScript API: Legacy Issuu viewer

Below you'll find a tutorial on the old way to embed Issuu documents. To get support for mobile devices (plus a bright and happy future), please use the new embed code instead.
In order to control the viewer via the Javascript API, you'll need to leave the small box below the code field unchecked. This api will not work together with the iframe version of the code for use on services on Tumblr, Wordpress etc.

Get the embed code

Go to Issuu.com and select any publication. Click the embed button, click "the old embed page", and copy the embed code.

The embed code you get is without any linebreaks, but if you format it a bit, you'll end up with something like this:

<div>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="width:420px;height:297px" id="5b265645-0505-0bad-ce44-62430bea7802" >
        <param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf?mode=mini&documentId=081219132433-764a1eafce5141fda136d10d58bd45f5" />
        <param name="allowfullscreen" value="true"/>
        <param name="menu" value="false"/>
        <param name="wmode" value="transparent"/>
        <embed src="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" wmode="transparent" style="width:420px;height:297px" flashvars="mode=mini&documentId=081219132433-764a1eafce5141fda136d10d58bd45f5" />
    </object>
    <div style="width:420px;text-align:left;">
        <a href="http://issuu.com/press/docs/2008-12?mode=embed" target="_blank">Open publication</a> - Free <a href="http://issuu.com" target="_blank">publishing</a> - <a href="http://issuu.com/search?q=smartlook" target="_blank">More smartlook</a>
    </div>
</div>

If you look inside the <object> tag, the <param name="movie"... line holds the same information as the <embed ... line. This is necessary in order to make it works across all major browsers. Some browsers will use the embed tag and some will use the object tag.

Pasting the embed code into a HTML document will give us this result:

Obtain the object

The next step is to obtain the object so you can start sending messages to it. So the logical thing would be to add an id like this: <object id="issuuViewer" > and then get it using getElementById:

var viewer = document.getElementById("issuuViewer");

Giving the object an id would seem sufficient, but as mentioned earlier, some browsers use the embed tag instead. So what do we do? One solution would be to write a small script that returns the correct element depending on the browser type, but then we would be getting into the browser detection business, and we don't want that. Instead we'll make use of a library that has solved this problem already. Enter the JavaScript library swfobject.

Embed with SWFObject

SWFObject is a JavaScript library that dynamically creates the needed markup, so different browsers get different markup. It provides a clean interface so we don't have to think about the browser differences anymore. This means no more having to repeat different parameters in different tags, and no more having to choose what element to ask depending on the browser.

Download SWFObject and include it on your html page.

<script type="text/javascript" src="swfobject/swfobject.js"></script>

Including this file will create the global Javascript object: swfobject.

There are many ways to use SWFObject, so please refer to the SWFObject website for the full documentation. In this tutorial SWFObject will replace an element that your choose with the correct embed markup for the current browser.

Insert an element with attribute id into your HTML to be replaced. Like this:

<div id="myContent"> </div>

The swfobject.embedSWF function requires 9 parameters. The interesting ones are the last three : flashvars, params, and attributes.

swfobject.embedSWF( swfFile, idOfTagToReplace, width, height, minimumFlashPlayerVersion , pathToexpressInstall.swf, flashvars, params, attributes);

We need to add one name/value pair: jsAPIClientDomain which tells the viewer which domain it is running on.

Below we have extracted all the attributes, params and flashvars from the code generated by the embed wizard before, and put them inside three Javascript literal objects.

We have also added jsAPIClientDomain, the domain the viewer will be running on, to the flashvars. Please note that Flash will view www.domain.com as different from domain.com so make sure you get it right.

<script type="text/javascript"> var attributes = { id: 'issuuViewer' }; var params = { allowfullscreen: 'true', menu: 'false', wmode: 'transparent' }; var flashvars = { jsAPIClientDomain: 'www.yourdomain.dk', mode: 'mini', documentId: '081219132433-764a1eafce5141fda136d10d58bd45f5' }; </script>

I think you will agree that this way of presenting what is going on is a lot more readable. Now all you need, is to pass these objects to SWFObject and it will do all the rest for you. Inserting the following line after the flashvars will do that:

swfobject.embedSWF("http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf", "myContent", "420", "264", "9.0.0","swfobject/expressInstall.swf", flashvars, params, attributes);

Controlling the viewer with Javascript

Once we have embeded the viewer with SWFObject the id will always be on the right element, so obtaining it is really easy:

document.getElementById('issuuViewer')

So to test it all out, inserting this somewhere in your html should make a link that will flip the pages forward:

<a href="#" onclick="document.getElementById('issuuViewer').goToNextPage(); return false;">goToNextPage</a>

The magic happens when the message goToNextPage is sent to the viewer:

document.getElementById('issuuViewer').goToNextPage();

All the other functions listed in the JavaScript API Refence Guide can be used in a similar fashion.

Example

You can see a demo of embedding and controlling the issuu viewer here.

Handling the change event

It is possible to set up an event handler for the change event like this:

var viewer = document.getElementById("issuuViewer"); viewer.addEventListener("change", "viewerChangeHandler");

The SWF will call the Javascript function viewerChangeHandler every time the current page changes no matter if it's JavaScript or Flash that does the changing. SWF to JavaScript communication defaults to 'sameDomain'. Meaning that the SWF and the html must come from the same domain. This is not the case here, so in order to permit this communication, set allowScriptAccess to 'always' in the embed parameters. You can do that by adding it to the params object like this:

var params = { ... allowScriptAccess: 'always', ... };

You can only set up the handler after the embed element has been loaded. The element is generated and inserted by SWFObject. Some time after the DOM with the Javascript has been loaded, SWFObject will insert an element to house the document. But how do we know when? To address this problem we have built in a callback, so you can pass a name of a function that the SWF will call once it's initializing on the page. Thus telling the JavaScript that the SWF is ready. To do so, just include the name of the JavaScript function in the flashvars like so:

var flashvars = { ... jsAPIInitCallback: 'myCallback', ... };

This tells the SWF that you expect the JavaScript function 'myCallback' to be called. Inside myCallback we can safely do the setup of the event handling.

function myCallback(){ document.getElementById("issuuViewer").addEventListener("change", "viewerChangeHandler"); }

Example

You can see an Example with event handling

Limitations