Question

A site heavily using a main iframe

I inherited a legacy codebase/website, http://ninjawars.net . The iframes were in place before I started coding on the site.

I constantly hear about the problems of iframes (security, accessibility, layout issues), and I’m pretty certain that iframes aren’t friendly for search engines (a big minus). My personal experience with iframes has mainly seen problems with their load times (heavy http requests, I guess?).

Searching for a replacement for iframes

Unfortunately, no-one who says “get rid of iframes” also gives an effective solution to my situation, generally assuming that a simple include of the content of the frame will make everything rainbows and unicorns (e.g. Converting from iframes). In my case, a static include solution does next to nothing for me.

jQuery load() (dynamically loads content into a div, for example) is a better fit, but doing a conversion to that method will take time, and doesn’t benefit accessibility for search engines, or non-javascript-browsing users. jQuery load() fixes the speed issue, but I’m not sure whether it fixes the accessibility issue. Even without javascript, the iframes still work (for manual clicks), though whether the extra support work of keeping the iframes working underneath the javascript is practical, I’m not sure.

Potential Alternatives?

• jQuery & load()
• Full rewrite of site to static pages with common header/footer/sidebar + some minor javascript polling.
• ??? Something not yet considered by me ???

Answer 1

Iframes are not the spawn of some unnamed demon, as some people would have you believe. They still have a very useful place for web applications.

They definitely are bad for search engine optimization, however! I would never recommend that a “normal” public web site use them unless absolutely necessary, especially if SEO was a big concern.

I would consider jQuery to be a good option for solving the accessibility issue. One of the great things about jQuery is that it is easy to make your site degrade gracefully for those users that don’t have javascript – like search engines.

Basically the way I approach a new public web site with jQuery is the following:

1. Build the site with static navigation. All content blocks that I would normally be getting from some ajax request (in your case, in an iframe), I make accessible in its own page. The “Contact Us” form is a great example – put it in it’s own page for non-javascript users, but it’ll eventually be loaded with ajax into a modal div for regular users. The static navigation ensures search engines see everything. In your case, replace the iframes with divs that just contain a link to the page that the iframe is currently loading.

2. Add jQuery. Taking it one page at a time, start replacing all occurrences of static navigation links with the ajax calls to load the content you want.

3. Refactor the javascript continually until you have minified it into a script that will work across all the navigation on the site.

An example of a simple gracefully degradeable site is the following (taken from a site I worked on):

$(document).ready(function() {

    $("#menu a[href]").each(function() {
        this.href = this.href.replace(/Index/, "Ajax");
    })
    .click(function() {
        $.get(this.href, null, function(data) {
            var $main = $("#main");
            $main.hide();
            $("#main").html(data);
            $main.fadeIn("slow");
        });
        return false;
    });

This script runs in all pages on the site, replacing any occurrence of “/Index/” in the menu navigation target URLs with “/Ajax/”, which redirects the URL to resources that return ajax responses, and then adds a click handler that handles adding the content to the page.

Now search engines and non-JS users can follow the static navigation, and JS users get a snappier UI with some effects.