Thursday, August 13, 2009

Dynamically loading pages using iFrame.

Use following steps to load pages dynamically using iFrame.

1. Declare an iFrame in HTML part of your code. You can use following code for this.< id="frmShow" runat="server" width="600px" height="300px" scrolling="auto" frameborder="1">

2. Now use src property of iFrame to set its source dynamically from code behind. Like following code:

frmShow.Attributes.Add("src", "Blank.aspx?Check=Blank");

here you can set URL as per your requirement.

3. To refresh the contents within the iFrame you need to take care of following things:
  • Use hyperlink as far as possible if you want to set Target property to iframe.
  • There is a property called "name" which need to be specified when referring to iframe.
E.g. 1
< id="SearchFrame" runat="server" width="550" height="220">

< id="HyperLink2" runat="Server" text="Go to Google" navigateurl="http://www.google.com" target="SearchFrame">


E.g. 2
< name="SearchFrame" id="SearchFrame" runat="server" width="550" height="220">
< id="HyperLink2" runat="Server" text="Go to Google" navigateurl="http://www.google.com" target="SearchFrame">

Now compare both e.g.s They are using same syntax. So they should behave in same manner. But E.g.1 will show the contents in new Window/Tab where as the second E.g. will display the contents within iFrame. No doubt, second case will perform better as it won't lead to Page reload. This is because of the the property "name". The "name" property has to be there in order to refresh contents within iFrame.

You can also refresh parent page from iframe.

< type="text/javascript">
function reloadParent()
{
window.parent.location.href='Page3iMain2.aspx?check=True';
}


On body part use following code:
< onload="reloadParent()">