Question

当我按下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()，但它表示“未解析的函数或方法”

Answer 1

当您完成AJAX调用时，它没有任何作用，因为您有一个空函数。
getElementById("form- iframe")将找不到任何内容，因为没有标识为form- iframe的元素。
如果iframe中的页面具有相同的主机，协议和端口，您应该可以通过window.parent.AdjustIframeHeight()访问该功能。
如果主机，协议或端口不匹配，则必须使用iframe中的Window.postMessage并在父页面上侦听message个事件。

Answer 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>

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

2 个答案: