Monday, May 26th, 2008

UFrame: div meets iframe

Category: HTML, Library

Omar AL Zabir has posted about a new library called UFrame:

UFrame combines the goodness of UpdatePanel and iframe in a cross browser and cross platform solution. It allows a div to behave like an IFRAME loading content from any page either static or dynamic. It can load pages having both inline and external Javascript and CSS, just like an iframe. But unlike iframe, it loads the content within the main document and you can put any number of UFrame on your page without slowing down the browser. It supports ASP.NET postback nicely and you can have DataGrid or any other complex ASP.NET control within a UFrame. UFrame works perfectly with ASP.NET MVC making it an replacement for UpdatePanel. Best of all, UFrame is implemented 100% in Javascript making it a cross platform solution. As a result, you can use UFrame on ASP.NET, PHP, JSP or any other platform.

To use it you simply setup a div:

  1. <div class="UFrame" id="UFrame1" src="SomePage.aspx?ID=UFrame1">
  2.   <p>This should get replaced with content from Somepage.aspx</p>
  3. </div>

This reminds me a little of purple includes which let you grab pieces of remote documents.

iframes are notoriously slow, and this is one reason why the Caja project exists. If we can trust code to be in the page itself, it can render a lot faster (think widgets in a page).

Also, sometimes I wish I could just say: <div nobleedingcss> around comments in a blog say, so no CSS or formatting from within can effect the outer page (e.g. bad closing of a tag).

Posted by Dion Almaer at 9:32 am
4 Comments

++---
2.9 rating from 77 votes

4 Comments »

Comments feed TrackBack URI

This is a good idea, since iframes really slow down browsing… But there are at least two limitations :
– UFrame containing a Form, in a Form
=> fields in the Uframe applies to the main form
– UFrame to an external link
=> ajax won’t load them, a proxy-acting script is required

Comment by Geompse — May 26, 2008

But it’s not accessible and not valid.
An accessible method would be to replace an iframe by an “Uframe” if the browsers supports javascript … like replacing the iframe by a div, by loading his content by Ajax or Comet…

The second problem is that you can’t load content from another domain by using Ajax … We’ll have to wait for XHR Level 2 and XDR(MS)…

Comment by Yves — May 26, 2008

Yay, we’re back at LAYER, I knew Netscape had it right the first time.

Comment by Chris Heilmann — May 27, 2008

Be careful, it’s a GPL licence pour the source code. I think we can’t use it in commercial application.

Comment by josephthibault — June 5, 2008

Leave a comment

You must be logged in to post a comment.