javascript - 如何获取沙盒 iframe 的高度？

Question

我有一个带有沙盒属性的 iframe。这个iframe的内容是直接通过'srcdoc'属性设置的。内容不安全，因为它可以由用户设置。

我想调整 iframe 的高度以匹配内容的高度。

var my_iframe = $(`<iframe sandbox frameborder=0 scrolling="no"></iframe>`);
var contained_html_code = `<h1>Example title</h1><p>Example paragraph</p>`;
my_iframe.prop('srcdoc', contained_html_code);

注意:

已经有很多这样的问题有很好的答案，但它们似乎都不适用于沙盒 iframe:我无法在 iframe 内执行任何脚本，而 iframe 外的脚本似乎无法执行访问和阅读 iframe 的内容。我如何使沙盒 iframe 工作？

奖励积分:

我只需要在设置 iframe 的内容时完成一次，但如果您知道如何编写不断更新大小的代码，这可能对遇到相同问题的其他人更有帮助。

背景/我为什么需要这个:

我网站的用户应该能够生成任意样式的 html 消息，这些消息可以安全地显示给其他用户。由于 html 可以包含不安全的脚本，因此这些消息被打包在一个 iframe 中。

Answer 1

您可以在没有允许脚本的情况下使用允许同源沙箱属性

$(function() {
    $("#testFrame").load(function() {
        $(this).height($(this).contents().height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe id="testFrame" sandbox="allow-same-origin" srcdoc="<div style='height: 300px; background: red;'></div>">
</iframe>