按下 JS 按钮并调整 iframe 的大小答案

【问题标题】：JS button pressed and resize iframe按下 JS 按钮并调整 iframe 的大小
【发布时间】：2015-07-19 06:57:36
【问题描述】：

当我按下 iframe 中的按钮时，它会消失标签，但不会调整 iframe 的大小。 ajax 完成后应该在另一个页面调用 AjustResizeIframeHeight 方法有什么建议吗？

更新

带有 iframe 的页面

<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
 obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>

<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}"  onload='javascript:resizeIframe(this);'>
</iframe>

内容 iframe：

<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>

<script>
    function xpto2(status,noteid) {
       var request =  $.ajax({
           ....
       });
        request.done(function() {
           window.parent.AdjustIframeHeight();
        });
}
</script>

在 ajax 函数中添加了window.parent.AdjustIframeHeight()，但它显示“未解析的函数或方法”

【问题讨论】：

标签： javascript jquery html ajax iframe

【解决方案1】：

当您完成 AJAX 调用后，它什么也不做，因为您有一个空函数。
getElementById("form- iframe") 将一无所获，因为没有 id 为 form- iframe 的元素。
如果您的 iframe 中的页面具有相同的主机、协议和端口，您应该可以通过 window.parent.AdjustIframeHeight() 访问该功能。
如果主机、协议或端口不匹配，您必须使用 iframe 中的 Window.postMessage 并在父页面上侦听 message 事件。

【讨论】：

我听从了你的建议，但我说“未解决的功能或方法”
如果您运行（从您的 iframe）console.log(window.parent)，它会在控制台中显示什么？你也试过postMessage吗？

【解决方案2】：

已解决 解决方法是添加一个div，然后调用该div到方法

带有 iframe 的页面

<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i)     {parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
</script>

<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}"  onload='javascript:resizeIframe(this);'>
</iframe>

内容 iframe：

<div id="page"> 
<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>
<\div>
<script>
function xpto2(status,noteid) {
      ....
   });
    request.done(function() {
       request.done(function() {
            parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
    });
}
</script>

【讨论】：