Disqus的iframe如何根據其內容調整其大小？

Question

下面是一個示例：http://www.npr.org/blogs/thetwo-way/2013/04/04/176224703/why-can-lance-armstrong-race-at-a-swim-meet

向下滾動到註釋。 Discus在頁面上插入iframe，然後將註釋加載到iframe中。

不知何故，iframe知道它的內容有多高，並且它擴展到它所插入頁面上的高度。

有誰知道這是可能的？尤其令人困惑的是，Disqus的iframe是一個不同的域名，所以我不知道腳本如何檢測其內容。

Answer 1

Disqus正在使用postMessage()發送消息從iframe返回主機頁面。如果你通過他們的主要iframe中的JavaScript代碼和搜索「的postMessage」你會發現這段代碼（原已經過壓縮，在這裏重新格式化）：

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") 
    } 

採用Bus這裏是有道理的：「在計算機體系結構中，總線是一個在計算機內部組件或計算機之間傳輸數據的子系統。「 （Wikipedia）

我期望看到東西加載到主機頁面中，就像設置事件監聽器的代碼的最後一部分，儘管我沒有通過加載到主機的腳本的粗略搜索找到它頁。

另請參閱Resizing an iframe based on content瞭解適用於舊版瀏覽器的相關技術。