ASP.NET AJAX Extensions and IFRAMEs

The UpdatePanel control is a little similar to the HTML IFRAME element.  Both provide a way to update a web page partially without reloading a full browser window.  However while they both are use for similar purposes they UpdatePanel and IFRAME are very different on the server side.

Typically web sites powered by ASP.NET with AJAX Extensions there are no need to use IFRAMEs, but iframes are still useful for several reasons:

  • IFrame allow easy integration between ASP.NET and non ASP.NET applications.  (This is useful say if you have an old ASP application)
  • If your web page has generates much view state data, iframes may be used to separate part of the page

So, if you find that IFRAMEs are still useful for you, you will probably need to interact between IFRAME and parent web page.  The most typical need is to trigger some action in the parent page. 

Today while answering a question on asp.net forums I decided to describe how to achieve this with more details. 

IFrame element can see the parent window as:

 window.parent

While this is absolutely correct way to talk to parent web page, I prefer slightly different approach.  Personally I consider IFRAME as a component and I don't want it to know much about the page hosting it.  So, I would rather expect the parent to tell IFRAME hosted page how to interact with the parent page. 

This can be easily done by adding required methods to the iframe window from the parent page, like:

    <script type="text/javascript">
      function setup() { 
          var ifr = $get('IFrame'); 
          ifr.contentWindow.doRefreshUpdatePanel = function() { 
              __doPostBack('InternalButtonToRefreshUpdatePanel', ''); 
          } 
      } 
    </script>

    <iframe id="IFrame" src="iframe.aspx" onload="setup();"></iframe>

The sample above emulates click of the button in the UpdatePanel allowing IFRAME content to update the content of the UpdatePanel in the parent page.

IFrame content can use functions provided by the parent page by invoking them directly on window object:

      function refreshUpdatePanel() { 
          window.doRefreshUpdatePanel(); 
      }

The complete sample code is available for download

 

5 Comments

  • Works fine when manually clicking the button. I have in codebehind added onload attribute to the body tag of my IFrame, that calls this method in certain situations, but this doesn't work.

    Any suggestions why..??

  • Hi ,

    I have used the code for I frame & update Panel

    http://weblogs.asp.net/blogs/ysolodkyy/downloads/iframe.zip

    But here My requirement is , When I click on second button in Iframe.aspx, I need to send the value from that page to the lael in UpdatPanel.

    I have Href in my Iframe.aspx.

    This Href Url need to displayed on the Label which is placed in update panel.

    Pls help me out in this regard.

    Thanks,

    --Srinath

  • nice, really nice!

  • What about the simple fact that IFrame allows scrolling and can keep content compact if it's a lot of content that you need to keep compact inside the parent .aspx page. I don't think you can add scroll bars on ASP.NET controls can you? So that's another reason to use IFrames..rarely but it is a use. Maybe I'm missing something but at least that is what comes to mind.

  • What about if i am doing some background process in Iframe and the want to redirect the parent page from server side code in iframe rather then javascript in your example.

    Thanks

Comments have been disabled for this content.