iframe alternative

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 hav开发者_开发技巧e 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!

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>

Using iframes to include page fragments which comes from the same server as the parent page is very poor for SEO and user experience. Bots don't index the iframe's content as part of the parent page. Ctrl+Clicking or copying links which should end up in iframe may cause "wtf?" experiences of the enduser when seeing the result.

Just use server side includes like <jsp:include>.

<jsp:include page="${param.selected}.jsp" />

Provide element1.jsp and so on.

Ajax-loading is also an option, but please do it unobtrusively (i.e. it must work the same way with JS disabled, see how tvanfosson demonstrated it). This way you reach a wider audience and better SEO.