Skip to content
postMessage interface
Branch: master
Clone or download
Latest commit 8a96a80 Nov 20, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
src version bump Nov 20, 2017
test Updated tests Feb 17, 2015
.gitignore Added unit tests Feb 5, 2014
.jshintrc More tests Dec 8, 2014
Gruntfile.js Updated tests Feb 17, 2015
LICENSE Added LICENSE Nov 10, 2014 version bump Nov 20, 2017 Added live examples and updated README Mar 24, 2015
package.json update repos Nov 16, 2015


postMessage interface allowing for the resizing of containing iframe and link navigation of the parent window.

Latest CDN version


Include the library within your page or application via <script> or require(). Call a method. You'll probably want to call enableAutoResize().

Auto-resize example:

<script src=""></script>

Getting parent's URL hash fragment example:

<script src=""></script>
    function logParentHashFragment(locationObj) {


Send all links to parent window example:

<script src=""></script>
    var links = document.querySelectorAll('a');
    for(var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function(event) {
        }, false);



Update iframe wrapper to match document height. Optional options (object) can be provided.

NOTE: absoluteHeight checks the position of every element on the page, this has a significant performance impact.

    absoluteHeight: false // Check absolute height of every element, slow!


(optional) height : INT or percentage eg '20%' Specify a height for the iframe wrapper. If no height is specified the height of the current document is sent.


Ask parent page for location information and executes callback passing along an object containing parent's document.location information.

Sample of returned location object:

    hash: "#myhash",
    host: "",
    hostname: "",
    href: "",
    origin: "",
    pathname: "/test.html",
    port: "8080",
    protocol: "http:"
    search: "?query=test",
    type: "get-location"            // for iframeMessenger usage
    id: "iframeMessenger:ceprg"     // for iframeMessenger usage


Navigate parent window to specified URL (string)

.scrollTo(x, y)

Sends request to scroll the parent page to a specified x, y position.


Ask parent page for position information and execute callback upon return post message.

Sample of returned position data object:

    'iframeTop':    300,    // iframe.getBoundingClientRect().top,
    'innerHeight':  620,    // window.innerHeight,
    'innerWidth':   960,    // window.innerWidth,
    'pageYOffset':  90      // window.pageYOffset


Guardian specific. Adds the field-value pair acquisitionData=<encode JSON> to all links with class "js-acquisition-link". Typical usage:

<script src=""></script>
        componentId: 'us_campaign_epic',
        componentType: 'ACQUISITIONS_EPIC',
        source: 'GUARDIAN_WEB',
        campaignCode: 'us_campaign'

Similar projects



  • Fix bug in acquisition link tracking.


  • Fix bug in acquisition link tracking.


  • Added .enrichAcquisitionLinks(object)


  • Added support for AdobeEdge content
  • New method for wrapping content using ::before and ::after CSS
  • More consistent height calculations across browsers
  • Listen for window 'load' before auto resizing
  • Lots more tests


  • Added .getLocation(callback) for retrieving parent location information
  • Added postMessage id to identify returning messages
  • Updated height calculation using max of several different readings
  • Fixed tests


  • Listen for image load events and trigger resize
  • More sensible way for calculating height
  • Removed sending of 'href' for validation


  • Remove trailing slash from location.href to prevent validation errors
  • Check received postMessage validity to prevent unsolicited responses


  • Added .getPositionInformation(callback) and .scrollTo(x, y)
  • More tests


  • Send iframe location.href to identify it to parent listener
  • Added unit tests


  • Added absoluteHeight option to auto-resize to handle absolute absolute positioned elements


  • Added DOM modification detection with setInterval fallback
  • Replaced hard-coded margin with getComputedStyle() values


  • Initial release.


HTML Document height via JavaScript research

You can’t perform that action at this time.