在iFrame内容高度更改上调整jQuery对话框div的大小，其中iframe包含在对话框中 [英] Resizing jQuery dialog div on iFrame content height change, where iframe contained in dialog

问题描述

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

I've a jquery dialog div. The div contains an iFrame to another ASP.Net page on the same domain. The iframe source page also contains jquery accordion control. Whenever the dialog is opened and accordion are expanded/collapsed, I need to resize the dialog box. Currently the contents are getting chopped off. Please note again that the dialog wraps the accordion within an iframe. I'm breaking my head against the wall to make things work. If somebody have a solution to this, then please help me out. Note: Everything is in same domain.

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

SOLVED See my ANSWER below.

推荐答案

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

The solution is for Same Origin (i.e. same domain). If you have access to iframe source page, put the following inline function globally:

    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);
    }

在你的手风琴电话中，添加激活财产。用它触发 fireiFrameResize（）方法。该功能将在手风琴的每次展开和折叠时运行。

In your accordion call, add activate property. Trigger the fireiFrameResize() method with it. The function will run on every expand and collapse of accordion.

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

在您的呼叫页面/控件上，iFrame控件在那里，将其高度和宽度设置为某些初始值默认。不要设置包含iframe的对话框高度和宽度。它默认采用iframe高度和宽度。请注意以下内容：

On your calling page/control, where iFrame control is there, set it's height and width to some initial default. Do not set the dialog height and width containing the iframe. It'll take the iframe height and width by default. Please note the following:

• 我的iframe是自定义用户控件中的服务器控件。


• 既然iframe是服务器控件，那么我设置 ClientIdMode =Static。这可以避免ASP.Net引擎创建运行时ID。

• My iframe is a server control inside a custom user control.
• Since, iframe is a server control here, so I set ClientIdMode="Static". This avoids runtime id creation by ASP.Net engine.

干杯。 ：）

这篇关于在iFrame内容高度更改上调整jQuery对话框div的大小，其中iframe包含在对话框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！