Keeping javascript widgets from controlling your blog

There’s several javascript widgets running on Meandering Passage. so when I read Alex Iskold’s excellent post on Read/WriteWeb titled “How JavaScript is Slowing Down the Web (And What To Do About IT),” it struck home.

With Meandering Passage, I’ve experienced the slower page loads and the sometimes hesitation or halts due to suspected  javascript issues.  I think what most people don’t realize is:

Anytime a piece of JavaScript is being loaded or evaluated, everything else has to wait.

This puts the loading of your blog in the hands of external parties.  If they are down or busy your site may be waiting or hung up depending on how well behaved the javascript widget is.

While the above post offered some good suggestions as to the over-all approach of handling javascript on web sites, I paid special attention to one of the tips a commenter offered:

Use Iframe to display the javascript of the widget. In other words create an HTML page containing just the widget tag, and in the page you want the widget displayed you include an iframe tag pointing to the HTML page with the widget code.

This method solves two problems:

– the javascript code of the widget (3rdparty) does not slow dow the display of your page. The slowness is limited to just the iframe. If their server goes down or is unreachable, is just the iframe that is not loading – and not your blog content.

= the widget publisher does not have access to your page content. JavaScript does not restrict cross domain scripting – so if you place a script src on your tag pointing to a 3rd party, that third party can see the referrer of your page, collect any data the user types, and who knows what.

The iframe solution has been used by advertising companies and more respected publishers since Microsoft first introduced it. It works pretty good.  — widgetry —

After further research, I decided to try moving most of Meandering Passage’s javascript widgets into Independent Frames (iframe), and the results have been positive. The main part of the blog seems to load quicker.  If the javascript takes longer to execute it only holds up the loading of it’s specific frame, not the whole blog.

Here’s how I move the Meandering Passage javascript widgets into their own iframes.

1. I first created a new folder where I would place the new html documents for the javascript code.  In my case I named the folder “html” but you could name it anything.

2. I then created a new html document for each javascript widget.  These documents contain the javascript code that currently is used in you blog code template.

3. I then added the following “iframe” html code in place of the javascript widget code.  The “src” will be the path of new folder that you created and the appropriate new html document with your javascript code.

4. I then saved these changes and reloaded the site to confirm the results.  That’s it…very simple.

For the most part the changes went over without incident, but I did have to play some with spacing on one widget. 

There may be some javascript code you want to keep in your blog template.  Investigate and decide on a case-by-case basis.

I’ve confirmed the results on Meandering Passage with the following browsers… FireFox, Safari, Camino, OmniWeb, and MS Explorer 7.0.  They all seem to handle the code well.

At this point I’d have to agree that using iframes is a good method for handling javascript on your blog, without letting it control your blog. 

Technorati Tags: iframes, blogging, javascript, blog