动态设置iframe的内容并调整大小

Question

如果我有以下iframe

<iframe id="template-preview" src="about:blank" sandbox="allow-same-origin"  frameborder="0" border="0" cellspacing="0"></iframe>

我使用下面的javascript + jquery

设置iframe内容

$('#template-preview').contents().find("html").html(code); 

如果我使用

查询iframe的滚动高度

document.getElementById("template-preview").contentWindow.document.body.scrollHeight

或通过

$('#template-preview').contents().height();

我得到一个空引用错误，但是如果我使用下面的代码更改我写入iframe的方式，则根据内容查找和设置iframe高度。

    var myIframe = document.getElementById("template-preview")
    var iframeDoc = myIframe.contentWindow.document;
    iframeDoc.open();
    iframeDoc.write(code); 
    iframeDoc.close();

问题是为什么？