iFrame Script Demo

<!DOCTYPE html>
<html>

<head>
  
</head>

<body>
  <h1>Publisher</h1>
  <input type="radio" name="iframeType" value="preview" checked/> Preview
  <input type="radio" name="iframeType" value="debug" /> Debug
  <h3>Try resizing the browser window</h3>
  <iframe src="https://pub.acornads.com/offers/3cbc62b2-306e-489a-9691-4bcc6e44e16b?user_uid=memberid&amp;age=36&amp;gender=m" frameborder="0" style="border: 1px solid black; width: 100%; height: 160rem"></iframe>
  <h3>Content Below iFrame</h3>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="publisher-script.js"></script>
  <script src="demo-script.js"></script>
</body>

</html>

//Global Variables
//Please include on the Publisher Site
var acornSrcLink = 'pub.acornads.com/offers/';
var crossDomain = 'pub';

//The message that we send to the Acorn iFrame
function messageAcornAds(name) {
    //Grabs all of the iFrames on the page
    var iframes = document.getElementsByTagName("iframe");

    //Initialize the iframe variable for existence checks
    var iframe = null;

    //Loop through all of the iFrames to select the Acorn iFrame
    for (i = 0; i < iframes.length; i++) {
        if(iframes[i].getAttribute("src") !== null && iframes[i].getAttribute("src").indexOf(acornSrcLink) > -1) {
            iframe = iframes[i];
        }
    }

    //Set up the data to be sent to the Acorn iFrame
    //JSON.stringify is necessary for IE support
    var data = JSON.stringify({
        event: name,
        height: window.innerHeight,
        width: window.innerWidth,
        offsetTop: iframe !== null ? iframe.getBoundingClientRect().top : 0,
    });

    //If the Acorn iFrame exists, send it a message with the data
    if(iframe !== null) {
        iframe.contentWindow.postMessage(data, '*');
    }
}

//Listens for the initialization message from the Acorn iFrame
window.addEventListener('message', function(event) {
    //Verifies that the event is coming from the Acorn iFrame
    if(event.origin.toLowerCase().indexOf(crossDomain) > -1 && event.data === 'Ready Acorns?') {
        messageAcornAds('Init iFrame');
    }
});

//Binds sending a message to the page's scroll event
window.addEventListener('scroll', function(event){
    messageAcornAds('Scroll Page');
});

//Binds sending a message to the page's resize event
window.addEventListener('resize', function(event){
    messageAcornAds('Browser Resize');
});

<!DOCTYPE html>
<html>

<head></head>

<body>

  <div>
    <h2>This is Acorn's iFrame</h2>
    <h3>
      Window Height: <span id="windowHeight"></span>px
    </h3>
    <h3>
      Window Offset: <span id="windowOffset"></span>px
    </h3>
     <h3>
      iFrame Height: <span id="iframeHeight"></span>px
    </h3>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="acorn-script.js"></script>

</body>

</html>

function inIframe() {
  try {
    return window.self !== window.top;
  } catch (e) {
    return false;
  }
}
//Listener 2
if (inIframe() === true) {
  var iframe = window.frameElement;

  var maxHeight = iframe.contentDocument.body.scrollHeight;
  window.addEventListener('message', function(event) {
    var data = JSON.parse(event.data);
    
    var newHeight = data.height - data.offsetTop - 10;
    
    if(newHeight <= 400) {
        newHeight = 400; 
    }
    
    if (data.event === 'Init iFrame' || data.event === 'Browser Resize') {
      var offset = data.offsetTop;
      iframe.style.height = newHeight  + 'px';
    }
    
    if(data.event === 'Scroll Page') {
        iframe.animate({
            height: newHeight
        }, 5);
    }
    
    //Display Code
    $('#windowHeight').html(data.height);
    $('#windowOffset').html(offset);
    $('#iframeHeight').html(newHeight);
  });
}

$(document).ready(function() {
  //Event 1
  if (inIframe() === true) {
    window.parent.postMessage('Ready Acorns?', '*');
  }
  
});

//Scripts for demo functionality
//This does not need to be included on the Publisher Site
$(document).ready(function() {
  $('input:radio').change(function(){
      if(this.value === 'preview') {
        $('iframe').attr('src', 'https://pub.acornads.com/offers/3cbc62b2-306e-489a-9691-4bcc6e44e16b?user_uid=memberid&age=36&gender=m').height(160+'rem');
        acornSrcLink = 'pub';
        crossDomain = 'pub';
      } else {
        $('iframe').attr('src', 'iframe.html');
        acornSrcLink = 'iframe';
        crossDomain = 'plnkr';
      }
  });          
});