在 iFrame 内容高度更改时调整 jQuery 对话框 div 的大小，其中 iframe 包含在对话框中答案

【问题标题】：Resizing jQuery dialog div on iFrame content height change, where iframe contained in dialog在 iFrame 内容高度更改时调整 jQuery 对话框 div 的大小，其中 iframe 包含在对话框中
【发布时间】：2013-11-27 13:42:22
【问题描述】：

我有一个 jquery 对话框 div。 div 包含指向同一域上另一个 ASP.Net 页面的 iFrame。 iframe 源页面还包含 jquery 手风琴控件。每当打开对话框并展开/折叠手风琴时，我都需要调整对话框的大小。目前内容正在被截断。请再次注意，对话框将手风琴包装在 iframe 中。我正在把头撞在墙上以使事情正常进行。如果有人对此有解决方案，请帮助我。注意：所有内容都在同一个域中。

已解决 请参阅下面的答案。

【问题讨论】：

请提供一些您尝试过的代码示例
@shanabus：请看编辑。谢谢。
我想知道为什么这个问题被否决了？

标签： jquery asp.net jquery-ui iframe

【解决方案1】：

当手风琴被切换时，您需要让子 iframe 与父窗口对话。

$yourAccordion.on('open', function(e){
  if(window.top && window.top.resizeDialog)
     window.top.resizeDialog($(window).width(),$(window).height());
});

然后在你的父页面中，有一个名为resizeDialog的全局函数

window.resizeDialog = function(w,h){
  $('#dialog').find('iframe').attr({
    width: w,
    height: h
  });
};

注意：您很可能需要考虑动画时间等。您还可以将其包含在用于打开/关闭手风琴的 jQuery animate 方法的 step 函数中，使其更平滑一些.

【讨论】：

非常正确，但无法使其在我的场景中工作。但是，我采用了另一种方法来实现它。检查我的解决方案。干杯。

【解决方案2】：

解决方案适用于同源（即同域）。如果您可以访问 iframe 源页面，请在全局范围内放置以下内联函数：

    var iFrameIdOnParentSelector = "#Replace_with_iframe_id_on_parent";
    var iFrameContentSelector = "#Replace_with_content_id_on_iframe_src_page";
    function fireiFrameResize(iFrameIdOnParentSelector, iFrameContentSelector) {
     var frame = $(iFrameIdOnParentSelector, window.parent.document);
     var height = jQuery(iFrameContentSelector).height();
     var width = jQuery(iFrameContentSelector).width();
     frame.height(height);
     frame.width(width);
    }

在您的手风琴通话中，添加activate 属性。用它触发fireiFrameResize() 方法。该函数将在手风琴的每次展开和折叠时运行。

     $("#accordionDiv").accordion({
      collapsible: true,
      active: false,
      heightStyle: "content",
      activate: function (event, ui) {
        fireiFrameResize(iFrameIdOnParentSelector, iFrameContentSelector);
      }
     });

在您的调用页面/控件上，其中有 iFrame 控件，将其高度和宽度设置为某个初始默认值。不要设置包含 iframe 的对话框高度和宽度。默认情况下，它将采用 iframe 的高度和宽度。请注意以下几点：

我的 iframe 是自定义用户控件内的服务器控件。
由于这里iframe是服务器控件，所以我设置了ClientIdMode="Static"。这样可以避免 ASP.Net 引擎创建运行时 ID。

干杯。 :)

【讨论】：

感谢大家的努力。 :)