Question

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

解决请参阅下面的答案。

Answer 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 step方法的animate函数中包含此功能它有点平滑。

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

干杯。：）

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

2 个答案: