Mitcz.com : Official blog of Rev. Mitcz, the demented devilish comedian from Hollywood, CA.

Speaking of your weird-ass javascript/IE bugs..

Today, I was working on the beta version of the new MusicPlusTV.com v3.0 site. On the site, I’m using an extensive iframe system to allow full browsing of the site, without ever refreshing/reloading/losing the live stream. Pretty sweet, no?

However, there’s a few issues with that solution, and I’ve since made my own fixes for them. Last night, everything broke and I couldn’t figure out why. I’ll explain what I was doing, and how I fixed it.

First and foremost, the #1 issue with iframes is what? Deep Linking. It’s not impossible to deep-link to iframes, it just requires trickery. There’s actually a few things involved, such as..

1. How do you link to an iframe directly?
2. How do you ensure that users who somehow end up on the iframe are shown the rest of the site, so the content is within it’s originally contained iframe?
3. How do you provide the surfer with an easy, straight-forward and conspicuous way of getting the URL of the iframe, for deep-linking?
4. How can you either kill the scrollbars on an iframe – or make all content fit PERFECTLY within the iframe so the user doesn’t have the body’s scrollbar AND an iframe scrollbar to deal with?

My solution to all of the above was to dynamically generate a NEW iframe that floats over the source iframe, with a little text field, providing the URL of the underlying page. This tells the user “Want to link to this page? Use the following URL :” and gives the warning that “it won’t work otherwise” if they’re not using the URL in the text field. OnLoad of every sub-page, it triggers the floated iframe to refresh and fill its text input field with the URL of the sub-page. But how does it float? Using position: fixed. But what about IE? I found a Javascript hack to enable fixed positioning in IE.

So, basically, we’re loading a page that sends a command to load another page, filling in a variable text field with PHP and keeping it consistently floated over the very bottom of the page (so as not to interfere with the content on the page, if possible).

Furthermore, another script tells the browser to check the size of the iframe when it’s loaded and dynamically update the height of the iframe to match, thereby killing the iframe’s need to scroll vertically.

I know, a lot of scripts to run. However, it worked flawlessly in IE 5.5, 6, and 6.0 SP2 as well as every flavor/version of FireFox that I could get my hands on, every version of Safari, and Opera 9+. That pretty well covers just about everyone who’s going to hit the site (almost. but hey.. it’s close enough).

The problem I encountered was that on M+’s internal systems, the site wouldn’t trigger the Javascript. It worked fine on my 2 test systems (XP SP2 running in Virtual PC, and a bonafide PC running XP SP2 w/the latest IE6 w/security patches). I theorized that maybe it was M+’s usage of the Google Toolbar. Maybe the Alexa toolbar. I tried both, and I STILL couldn’t reproduce the errors that users at the M+ headquarters were experiencing. The only error IE could give was ..

Line : 11
Char : 6
Error : Access is denied.

Gee, thanx. WTF does that mean? After a little Googling, I found that it’s common to see that when, for instance, popping a javascript window that loads in content from another domain. Fair enough, but I wasn’t loading from another domain. Then it dawned on me. I somehow reproduced the error this morning, by accident. The only difference today than yesterday? I used “www” before the domain name. Removing that made the javascript work. Adding it – and IE6 thought “oh, another domain is triggering this javascript. No, sir”.

The solution? Rewrite a rule in .htaccess to account for it. To do this yourself, FTP into your server and see if you can find a file called “.htaccess” in the root directory. If it doesn’t exist, create one locally. To get around that most OS’s will hide any files that being with a “.” – I start a blank file called “_htaccess”, save it and upload it – then once it’s on the server, I’ll change the filename to “.htaccess”. Depending on your FTP app, this may be easier or harder than I just described. (I recommend the excellent Transmit 3 by Panic software).

At any rate, here’s the rule you want to add to your .htaccess file :


RewriteEngine On
RewriteCond %{HTTP_HOST} !yourdomain.com [OR]
RewriteCond %{HTTP_HOST} www.yourdomain.com
RewriteRule ^.*$ http://yourdomain.com%{REQUEST_URI} [R,L]


Just replace “your domain”, of course, upload and you’re all set. Now you can reference javascripts, et al from your domain w/absolute paths (helpful when using hidden directories and subdomains to build a site before pushing it live – then you only have to change one global variable that points to your “base url”).

Diggin' my shit? Well then..