iframe alternative

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!

tvanfosson · Accepted Answer · 2011-09-29T01:23:52.067

3

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>

edited Sep 29 '11 at 01:23

answered Sep 29 '11 at 00:56

tvanfosson

524,688
99
697
795

Yes. The links are in the same domain. But I already am using dojo, so I do not want to use jQuery as well. Is the above javascript you have written in respect to jQuery? – rgamber Sep 29 '11 at 01:09
@rgamber - yes, it's jQuery, but I'm sure that Dojo has a similar capability. – tvanfosson Sep 29 '11 at 01:16
ok! thought so.. I have not used jQuery. But I will look into a dojo alternative. Thanks for the advice. – rgamber Sep 29 '11 at 01:18
@rgamber - i added some (untested) Dojo code for the handler. – tvanfosson Sep 29 '11 at 01:24
thanks for the effort. I also was looking into it. Seems like a simple ContentPane widget has a 'href' attribute which can also be used to achieve the same result.. – rgamber Sep 29 '11 at 01:34

score 2 · Answer 2 · answered Sep 29 '11 at 01:27

2

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.

answered Sep 29 '11 at 01:27

BalusC

1,082,665
372
3,610
3,555

Well, I am aware of the , but I don't think I can use it in this scene because the user has to click on a javascript element. Since the page already has been rendered the jsp/java content will no longer be there. This assuming I am understanding you right.. – rgamber Sep 29 '11 at 01:36
Disable JS in your browser. You'll see what searchbots and most smartphones see. Don't forget to click "unobtrusively" link in my answer. – BalusC Sep 29 '11 at 01:40

iframe alternative

2 Answers2