javascript - 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

DisquspostMessage()用于将消息从 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是有道理的：“在计算机体系结构中，总线是在计算机内部的组件之间或计算机之间传输数据的子系统。” （维基百科）

我希望看到加载到主机页面的内容，例如设置事件侦听器的代码的最后一部分，尽管我在粗略搜索加载到主机页面的脚本时没有找到它。

另请参阅根据内容调整 iframe 的大小以了解适用于旧版浏览器的相关技术。