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

您可以使用allow-same-origin沙箱属性而不使用allow-scripts

$(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>

如何获取沙盒iframe的高度？

1 个答案: