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了解适用于旧浏览器的相关技术。

Disqus的iframe如何根据其中的内容调整自身大小？

1 个答案: