Question

Before I ask my question I have gone through this: Better alternative to an iframe?, and haven’t found a solution to my problem, or maybe I did not understand correctly!

I have a HTML-page which contains a Dojo-tree on the left hand side. When I click on an element on the left-hand tree (Say element1), I load an iframe on the right with a url:

www.something.com?selected=element1

Now the source of the frame is a jsp which does this:

<% 
/* Get the user selection*/
String selectedElement = request.getParameter("selected");

/* Code to Fetch some content from the database using the above string */
%>

Since the left hand side tree has many elements, clicking on each element loads the iframe on the right hand side as above. The arrangement works perfectly fine. But I am wondering if this is the best way to do it? Can I some how not use iframes and still obtain the same result? I read somewhere that loading iframes is several times slower than not loading iframes.
Any help will be appreciated!

Answer 1

If the links are in the same domain, you could use jQuery load to populate a DIV instead of an iframe. This would be much better from an organizational perspective and make your page much easier to navigate for people with accessibility issues. If the content is from another domain, you’re stuck with the iframe unless you process the requests on your server.

<div id="menu">
    <a class="menu-item" href="/?selected=foo">Foo</a>
    <a class="menu-item" href="/?selected=bar">Bar</a>
    ...
</div>

<div id="content">
  ...default content...
</div>

<script type="text/javascript">
   $(function() {
       $('.menu-item').click( function() {
           $('#content').load( $(this).attr('href') );
           return false;
       });
   });
</script>

Dojo example

<script type="text/javascript">
   dojo.ready( function() {
       dojo.query('.menu-item').onclick( function() {
           dojo.xhrGet({
              url: dojo.attr(this,'href');
              load: function(content) {
                   dojo.byId('content').innerHtml = content;
              }
           });
           return false;
       });
   });
</script>