How does a Disqus iframe resize based on the content inside it?

Question

Here is an example: http://www.npr.org/blogs/thetwo-way/2013/04/04/176224703/why-can-lance-armstrong-race-at-a-swim-meet

Scroll down to comments. Discus inserts an iframe on the page, and then comments are loaded inside the iframe.

Somehow, the iframe knows how tall its content is, and it expands to that height on the page that it pasted.

Does anyone know HOW is this possible? Particularly confusing because the Disqus iframe is a different domain, so I don't know how any script can detect the contents inside it.

Answer 1

Disqus uses postMessage() to send an iframe message back to the main page. If you look at the JavaScript code inside your main iframe and search for "postMessage", you will find this code (the original will be changed, reformatted here):

  DISQUS.define("Bus", function() { function e(a) { a = a.split("/"); return a[0] + "//" + a[2] } var g = DISQUS.use("JSON"), c = window.location.hash.slice(1), b = window.opener || window.parent, h = document.referrer, f = {}; f.client = e(document.location.href); f.host = h ? e(h) : f.client; return { origins: f, messageHandler: function(a) { var b; try { b = DISQUS.JSON.parse(a.data) } catch (c) { return } if (!(b.name[0] === "!" && a.origin !== f.client)) switch (b.scope) { case "client": DISQUS.Bus.trigger(b.name, b.data) } }, postMessage: function(a) { a.sender = c; a = g.stringify(a); b.postMessage(a, "*") }, sendHostMessage: function(a, b) { b = b || []; DISQUS.Bus.postMessage({ scope: "host", name: a, data: b }) }, sendGlobalMessage: function(a, b) { b = b || []; DISQUS.Bus.postMessage({ scope: "global", name: a, data: b }) } } }); _.extend(DISQUS.Bus, Backbone.Events); $(document).ready(function() { var e = window.addEventListener ? window.addEventListener : window.attachEvent, g = window.addEventListener ? "message" : "onmessage"; if (!e) throw Error("No event support."); e(g, DISQUS.Bus.messageHandler, !1); window.onunload = function() { DISQUS.Bus.sendHostMessage("die") } 

Using Bus here makes sense: "In computer architecture, a bus is a subsystem that transfers data between components within a computer or between computers." ( Wikipedia )

I would expect to see something loaded on the main page, for example, the last part of this code that the event listener installs, although I did not find it in a quick search through scripts loaded on the main page.

See also Resizing an iframe based on content for a corresponding method that works in older browsers.