Emulate xHTML Strict - Compliant iFrames & Using jQuery
Developers continue to argue whether it’s really that important to publish everything using the “Strict DOCTYPE”, or if valid markup code is really even that important. While this is a discussion for another time, I try to publish every site I author in Valid, Strict xHTML. I believe standards are made for a reason, and if you wish to write good code - just follow the standards.
Occasionally I find the need for a page element that is not considered valid xHTML-Strict markup. Once big one that has come up is the good ole’ “iFrame” tag. Granted you can always change the DOCTYPE to “Transitional” and still have valid code, or you can use the “Object” tag to get the same results and be valid. In the past I’ve done both of these, but I’d rather use the Strict DOCTYPE and let’s face it; “Object” tags simply do not play nice across browsers. I’m sure there are other ways to display this sort of content, but I’ve yet to find any useful. Regardless, I found what I think is a MUCH better way to display iFrame content, both technically speaking and considering Search Engine Optimization (SEO; search bots don’t like iFrames). I wanted to share in case someone else finds himself or herself in the same situation.
Note: This outline is designed for people with at least a little or moderate developing experience. Also, this technique is a workaround that is SEO friendly for use when iFrame content is inevitable. It should be noted that iFrames are not valid elements for a reason and should be filtered out if possible.
Step One: Setting up jQuery to run on your site
I won’t get into a big rant about jQuery, but lets just say that it is probably the best thing to happen to JavaScript since, well, JavaScript. For those who don’t know what jQuery is, or what it does, it can basically be summed up like this:
jQuery is a crazy-powerful, free JavaScript library that once included on your page, allows developers to enhance and manage their pages, using JavaScript, in a way that is much less technical or demanding than compiling advanced scripting knowledge and well… doing all the work yourself. Once again, god bless open source!
Use the link above to visit the jQuery download page. Scroll down until you see “Current Release” heading and select a file to download (I use the “minified” version personally). Save the file to your website code base. If you are not sure where to save it, a common convention is to make a “scripts” or “includes” folder in your website root where all shared files go.
Also - Because I don’t want to muck with the contents of the jQuery file, I always create an additional JavaScript file for custom functions that I write (using jQuery) to handle data on my pages. I call this file something like “functions-custom.js” and include on my page as well. Just make sure to place it after the main jQuery script call so the browser gets jQuery first, as it is the brains here that my functions (loaded second) depend on.
Once you have the jQuery file saved and the custom function file created, you simply need to add it them to the <head> of your xHTML Strict page - in the same way you would add any JavaScript file:
<script type="text/javascript" src='path/to/where/you/put/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src='path/to/where/you/put/functions-custom.js"></script>
Note: It may go without saying, but you need to update the path in the code above to point at the appropriate files.
With that complete, you are now including both the jQuery JavaScript library and your custom file on your page and can begin to see what it can do.
Step Two: Creating the custom function to do all the work
The issue: We have an iFrame we want to use on our page but:
- Iframes are not valid xHTML Stict Markup.
- Iframes are SEO bottlenecks.
The Solution:
- Send the markup to the browser using valid code, then use javascript to dynamically insert the iFrame code after the page is downloaded
- Because most search bots don’t parse JavaScript, they receive the original valid markup with SEO-friendly urls to the iFrame content.
The Code:
Place this in your “functions-custom.js” file you made above:
$(document).ready( function() {
// create xhtml strict friendly iframe
$('a.iframe').each(
function (i) {
$(this).replaceWith("<iframe src='" + this.getAttribute("href") + "' frameborder='0' scrolling='no'></iframe>");
}
);
});
Place this in your xHTML Strict page where you want the Iframe to display (anywhere a link tag can be placed and still validate):
<a href="Link to my iframe content" class="iframe">View my Iframe Content</a>
With everything above in place, you should now be able to load your page and see the iFramed content. If not, just review above to be sure you have it set up correctly.
Step three: Understanding what the heck is happening.
Ok, first lets look at the link. The only really important thing to notice here is the class declaration:
<a href="Link to my iframe content" class=”iframe” >View my Iframe Content</a>
The class is needed because when the page loads and the JavaScript fires, any link on the page with a class of “iframe” will be converted into an iFrame with the content of the iFrame being the “href” of the link (see below). Because the jQuery functions will only fire after the page is sent to the browser, if you view the page source you will actually see the “a” tag and not the “iFrame” tag. This makes the link SEO-friendly because search bots will scan the xHTML markup of the page and generally not parse the JavaScript. Thus seeing the normal link tag, not the dynamically generated iFrame that the link tag was “replaced with” after the jQuery ran.
Note: Tools like Firebug will show you the “compiled source” of a page, allowing you see the “final” markup creating the page after all JavaScript has been run in the browser. You will see the iframe tag in the compiled source.
Now, if all that makes sense let’s look at the function we added to the functions-custom.js file. There are two main components to it. The first part (below) is needed for most any actions that require jQuery to run. It basically tells the browser to wait until the page is loaded and jQuery is prepared to run. Once it is ready, the items inside will fire.
$(document).ready( function() {
// some functions and stuff to run once jQuery is ready
});
In some sense, it’s practical to consider the “$(document).ready( function() {” the header and the “});” the footer of your custom scripts. As mentioned, this tells the browser to wait until jQuery is ready and then run anything between those lines.
The custom code we wrote to create the iFrame(s) is:
$(document).ready( function() {
// create xhtml strict friendly iframe
$(’a.iframe’).each(
function (i) {
$(this).replaceWith(”<iframe src=’” + this.getAttribute(”href”) + “‘ frameborder=’0′ scrolling=’no’></iframe>”);
}
);});
To really understand the functions and options you really need ready up on, and tinker with jQuery. To summarize, the function outlined above will:
- Scan the document for all links that have the class “iframe” and loop through results - $(’a.iframe’).each
- Replace each instance with an iFrame tag, using the original link’s “href” as the iFrame location - $(this).replaceWith
Summary
This method will send SEO-friend, valid xHTML-Strict code to the browser. Once loaded, the jQuery-powered function actually replaces specific links (tagged with class=”iframe”) with the iFrame tag - problem solved.
Suggested Reading
Cheers!
-a
July 30th, 2008 at 11:28 am
This is excellent, but a fairly vital element of using an iframe is to specify the width and height. While it’s possible to embed it right in the JavaScript, the beauty of your method is you can use the same piece of JavaScript for all the code.
It’d be nice if you could somehow get it to parse something in the anchor to get the width/height, for example perhaps if the class were class=”iframe height:300 width:200″.
Way beyond me though to actually implement.
July 30th, 2008 at 11:39 am
A way to pass those can certainly be added to the script, but I was using CSS to handle the iFrame dimensions by adding this to my stylesheet: iframe { height: 500px; width: 500px; }
Does that help, or would you like to see an updated script?
Cheers,
a
July 31st, 2008 at 6:40 am
Aha, I didn’t think of using a class in the generated iframe and targeting it. Thanks!
August 11th, 2008 at 6:26 pm
Hi Andrew!
I just came across this site from a google search on iframes and I have a question regarding this technique (which I totally love and am going to start implementing!
Everywhere I read SEO’s talk about how iframes are bad for seo. I almost have to absolutely use an iframe and cant avoid it. So I was wondering does this technique make it seo friendly? or not as bad for my websites seo efforts when implemented?
Thanks for the awesome post.