Iframe State Reporting API

This API allows you to get state reporting for a publication within an iframe using Javascript.

First you must append "&pjs=1" to the publication URL in the SRC attribute of the <iframe>:

<iframe src ="http://[yourdomain]/publication?i=12345&pjs=1" width="100%" height="100%">
  <p>Your browser does not support iframes.</p>
</iframe>

This URL parameter triggers the firing of a Javascript function that must be named bPageChange() in the parent of the frame. To comport with modern browser security requirements, the page must also include a JavaScript library located at https://cdn.coverstand.com/html5_viewer/compiled/controliframe-min.js.

The bPageChange() function will be passed an array with the following elements on every page turn:

[0] is the issue id

[1] is the first page #

[2] is the second page #

The following code example both enables reporting and sizes the <iframe> to full screen:

<!DOCTYPE html>
<html>
<head>
<title>Custom Page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//mydigitalpublication.com//html5_viewer/compiled/controliframe-min.js"></script>
<script type="text/javascript">
window.onload = init;
function init() {
    var height = 0;
    if( document.documentElement && document.documentElement.clientHeight ) {
        height = document.documentElement.clientHeight;
    } else if( document.body && document.body.clientHeight ) {
        height = document.body.clientHeight;
    } else if( window.innerHeight ) {
        height = window.innerHeight - 18;
    }
    frame = document.getElementById("mainFrame");
    frame.parentNode.style.height = (height) + "px";
    frame.style.height = (height) + "px";
    frame.src="http://digital.modernluxury.com/publication/?m=3624&l=1&pjs=1&ver=html5";
    IframeViewer.start(frame);
}
</script>
</head>
<body>
<iframe src="http://digital.modernluxury.com/publication/?m=3624&l=1&pjs=1&ver=html5" width="1280" marginwidth="0" height="1080" marginheight="0" align="left" scrolling="Auto" frameborder="0" id="mainFrame"></iframe>
<script type="text/javascript">
  function bPageChange(a)
  {
    var issue_id = a[0];
    var first_pgno = a[1];
    var second_pgno = a[2];
    console.log(a);
  }
</script>
</body>
</html>