<%!
   import json
%>
<!doctype html>
<html>
<head>
    <style type="text/css">
    html, iframe, body, object, embed, div, span, p {
        margin: 0;
        padding: 0;
    }

    iframe {
        max-width: 100%;
    }
    </style>
</head>
<body>
    ${unsafe(thing.body)}
    % if thing.unknown_dimensions:
    <script type="text/javascript">
    if (window.parent) {
        var knownWidth = 0, knownHeight = 0;
        window.setInterval(function() {
            var root = document.documentElement,
                context = ${unsafe(json.dumps(thing.js_context))};

            if (knownWidth === root.offsetWidth && knownHeight === root.offsetHeight) {
                return;
            }

            knownWidth = root.offsetWidth;
            knownHeight = root.offsetHeight;

            window.parent.postMessage(JSON.stringify({
                "action": "dimensionsChange",
                "width": knownWidth,
                "height": knownHeight,
                "updateId": context.liveupdate_id,
                "embedIndex": context.embed_index
            }), '*');
        }, 500);
    }
    </script>
    % endif
</body>
</html>

<%!
   import json
%>
<!doctype html>
<html>
<head>
    <style type="text/css">
    html, iframe, body, object, embed, div, span, p {
        margin: 0;
        padding: 0;
    }

    iframe {
        max-width: 100%;
    }
    </style>
</head>
<body>
    ${unsafe(thing.body)}

    % if thing.unknown_dimensions:
    <script type="text/javascript">
    if (window.parent) {
        var root = document.documentElement,
            context = ${unsafe(json.dumps(thing.js_context))},
            knownHeight = 0,
            knownWidth = 0;

        var checkDimensions = function() {
            if (root.offsetHeight === knownHeight && root.offsetWidth === knownWidth) {
                return;
            }

            knownWidth = root.offsetWidth;
            knownHeight = root.offsetHeight;
            window.parent.postMessage(JSON.stringify({
                "action": "dimensionsChange",
                "width": knownWidth,
                "height": knownHeight,
                "updateId": context.liveupdate_id,
                "embedIndex": context.embed_index
            }), '*');
        };

        if ('MutationObserver' in window) {
            /* Currently just check on every set of mutations. */
            var observer = new MutationObserver(checkDimensions),
                config = { attributes: true, subtree: true};

            observer.observe(root, config);
        } else {
            window.setInterval(checkDimensions, 500);
        }
    }
    </script>
    % endif
</body>
</html>

Use MutationObserver in embeds when available
Use MutationObserver in embeds when available
