是否可以允许 iframe resizeTo/By moveTo/By？

Question

是否可以配置 iframe 的 parent 以允许 iframe resizeTo 和类似功能 (moveTo)？

或者我需要手动将消息传递给 parent 吗？

iframe

window.resizeTo = function(w,h){
 parent.postMessage({
  "command":"window_resizeTo",
  "data":{width:w,height:h}
 }, "*")
}

parent

function receiveMessage(event)
{
 var message = event.data;
 var command = message.command;
 var properties = message.data;

 switch(command)
 {
    case "window_resizeTo":
        $(#iframe").setAttribute("style", `width:${properties.width}px;height:${properties.height}px`)
        break;
    // and so on for every function I wish to proxy
 }
}

编辑：
iframe 和 parent 同源。我知道我可以从 iframe 内部使用 window.parent（然后调整 iframe 的大小会很容易）。我的问题更多是关于允许自动绑定的 iframe 选项，而不是必须自己做。

编辑2
这可能不存在。因为用例太窄了。即使 parent 可以让 iframe 自行调整大小，parent 可能希望限制区域 and/or 添加偏移量。

答案是： iframe 中已经有 window.resizeTo 和类似功能，但（由于滥用）它们可能什么都不做。
如果您想 resize/move 在 parent 上下文中的 iframe，您必须自己进行“绑定”。
没有直接绑定：您必须在更改 iframe offset/width 的函数中转换调整大小函数。如果 iframe 和 parent 同源，您可以从 parent 本身操纵 parent（以及 iframe）。我不推荐这个。
更好的选择可能是将消息发送到 parent.

Answer 1

如果 IFrame-Content 是从不同的来源加载的，您必须使用 postMessage-Event 来为 IFrame 提供更改其大小的机会。看看 MDN 上的 Definition of an origin。

如果 IFrame-Content 遵循同源策略，您可以从 iframe 中访问 window.parent.document 并直接修改父节点。

可以使用以下方法找到父文档中的节点：

// script at the iframe document
try {
  const node = [...window.parent.document.querySelectorAll("iframe")]
     .find(iframe => {
       try { // avoid errors from inaccessible iframes
         return iframe.contentWindow == window
       } catch (e) {}
     });
  if (node) {
    node.setAttribute("style", "...");
  }
} catch(e) {
  // unable to access parent
}

Answer 2

试试这个例子，为我工作，问候。

<script type="application/javascript">    

    function resizeIFrameToFitContent( iFrame ) {

        iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
        iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
   }

    window.addEventListener('DOMContentLoaded', function(e) {
            var iFrame = document.getElementById( 'iFrame1' );
            resizeIFrameToFitContent( iFrame );

            // or, to resize all iframes:
            var iframes = document.querySelectorAll("iframe");
            for( var i = 0; i < iframes.length; i++) {
            resizeIFrameToFitContent( iframes[i] );
       }
    });

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

是否可以允许 iframe resizeTo/By moveTo/By？

Is it possible to allow an iframe to resizeTo/By moveTo/By?

javascript

iframe

window

parent

postmessage