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这里的使用是有道理的:"在计算机体系结构中,总线是一个在计算机内部或计算机之间传输数据的子系统." (维基百科)

我希望看到一些东西加载到主机页面中,就像设置事件监听器的代码的最后一部分一样,尽管我没有通过加载到主机页面的脚本粗略搜索它.

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