Skip to content

November 28, 2012

Fun with Framesets in 2012

by e1ven

One of the things I’ve noticed in web development is a trend toward avoiding older technologies.

There’s often a good reason for this – Newer replacements allow more flexibility, work more reliably, and are better supported.

But that doesn’t mean we should always abandon old friends – In this case, I mean the humble HTML frame.



Although deprecated in HTML5, there’s still fun to be had.

But aren’t frames evil?

One of the biggest criticisms of frames is that they aren’t reliably accessed – Their very nature allow search-engines (or users) to link to one specific frame, rather than to the frameset container you’re wrapping them with.


It turns out, we have a weapon against this, which has been around since 1998- The DataURI.

Rather than linking to a specific file, using the datauri, we can embed our frame elements directly INSIDE the original page.
They can be generated at the same time, with the rest of your code, and stored directly.
This eliminates the idea of a separate page that might ever accidentally get linked to.

<frameset cols="30%,*">
        <frame src="data:text/html;base64,CjxodG1sPgogICAgPGhlYWQ+CiAgICAgICAgPHRpdGxlPkZyYW1lIE1lbnU8L3RpdGxlPgogICAgICAgIDxiYXNlIHRhcmdldD0iY29udGVudCI+CiAgICA8L2hlYWQ+CiAgICA8Ym9keSBiZ2NvbG9yPSIjMDA5OUREIj4KICAgICAgICA8YSBocmVmPSJodHRwOi8vd3d3LnlhaG9vLmNvbSIgY2xhc3M9Im1lbnUiPllhaG9vLmNvbTwvYT48YnIgLz4KICAgICAgICA8YSBocmVmPSJodHRwOi8vd3d3Lmdvb2dsZS5jb20iIGNsYXNzPSJtZW51Ij5Hb29nbGUuY29tPC9hPjxiciAvPgogICAgICAgIDxociAvPgogICAgICAgIDxhIGhyZWY9Imh0dHA6Ly93d3cuZWJheS5jb20iIGNsYXNzPSJtZW51Ij5FYmF5LmNvbTwvYT48YnIgLz4KICAgICAgICA8YSBocmVmPSJodHRwOi8vd3d3LmZhbmRhbmdvLmNvbSIgY2xhc3M9Im1lbnUiPkZhbmRhbmdvLmNvbTwvYT48YnIgLz4KICAgIDwvYm9keT4KPC9odG1sPgo=">
        <frame src="data:text/html;base64,CjxodG1sPgogICAgPGhlYWQ+CiAgICAgICAgPHRpdGxlPkZyYW1lIENvbnRlbnQ8L3RpdGxlPgogICAgPC9oZWFkPgogICAgPGJvZHkgYmdjb2xvcj0iI0RERERERCI+CiAgICAgICAgPHA+SGVyZSdzIHdoYXQgaXQgd291bGQgbG9vayBsaWtlQSBnb29kIHJ1bGUgb2YgdGh1bWIgaXMgdG8gY2FsbCB0aGUgcGFnZSB3aGljaCBjb250YWlucyB0aGlzIGZyYW1lIGluZm9ybWF0aW9uICJpbmRleC5odG1sIiBiZWNhdXNlIHRoYXQgaXMgdHlwaWNhbGx5IGEgc2l0ZSdzIG1haW4gcGFnZS4KICAgICAgICA8cD5BIGdvb2QgcnVsZSBvZiB0aHVtYiBpcyB0byBjYWxsIHRoZSBwYWdlIHdoaWNoIGNvbnRhaW5zIHRoaXMgZnJhbWUgaW5mb3JtYXRpb24gImluZGV4Lmh0bWwiIGJlY2F1c2UgdGhhdCBpcyB0eXBpY2FsbHkgYSBzaXRlJ3MgbWFpbiBwYWdlLjwvcD4KICAgICAgICA8cD5BIGdvb2QgcnVsZSBvZiB0aHVtYiBpcyB0byBjYWxsIHRoZSBwYWdlIHdoaWNoIGNvbnRhaW5zIHRoaXMgZnJhbWUgaW5mb3JtYXRpb24gImluZGV4Lmh0bWwiIGJlY2F1c2UgdGhhdCBpcyB0eXBpY2FsbHkgYSBzaXRlJ3MgbWFpbiBwYWdlLjwvcD4KICAgICAgICA8cD5BIGdvb2QgcnVsZSBvZiB0aHVtYiBpcyB0byBjYWxsIHRoZSBwYWdlIHdoaWNoIGNvbnRhaW5zIHRoaXMgZnJhbWUgaW5mb3JtYXRpb24gImluZGV4Lmh0bWwiIGJlY2F1c2UgdGhhdCBpcyB0eXBpY2FsbHkgYSBzaXRlJ3MgbWFpbiBwYWdlLjwvcD4KICAgICAgICA8cD5BIGdvb2QgcnVsZSBvZiB0aHVtYiBpcyB0byBjYWxsIHRoZSBwYWdlIHdoaWNoIGNvbnRhaW5zIHRoaXMgZnJhbWUgaW5mb3JtYXRpb24gImluZGV4Lmh0bWwiIGJlY2F1c2UgdGhhdCBpcyB0eXBpY2FsbHkgYSBzaXRlJ3MgbWFpbiBwYWdlLjwvcD4KICAgICAgICA8cD5BIGdvb2QgcnVsZSBvZiB0aHVtYiBpcyB0byBjYWxsIHRoZSBwYWdlIHdoaWNoIGNvbnRhaW5zIHRoaXMgZnJhbWUgaW5mb3JtYXRpb24gImluZGV4Lmh0bWwiIGJlY2F1c2UgdGhhdCBpcyB0eXBpY2FsbHkgYSBzaXRlJ3MgbWFpbiBwYWdlLjwvcD4KICAgICAgICA8cD5IZXJlJ3Mgd2hhdCBpdCB3b3VsZCBsb29rIGxpa2VBIGdvb2QgcnVsZSBvZiB0aHVtYiBpcyB0byBjYWxsIHRoZSBwYWdlIHdoaWNoIGNvbnRhaW5zIHRoaXMgZnJhbWUgaW5mb3JtYXRpb24gImluZGV4Lmh0bWwiIGJlY2F1c2UgdGhhdCBpcyB0eXBpY2FsbHkgYSBzaXRlJ3MgbWFpbiBwYWdlLgogICAgICAgIDxwPkEgZ29vZCBydWxlIG9mIHRodW1iIGlzIHRvIGNhbGwgdGhlIHBhZ2Ugd2hpY2ggY29udGFpbnMgdGhpcyBmcmFtZSBpbmZvcm1hdGlvbiAiaW5kZXguaHRtbCIgYmVjYXVzZSB0aGF0IGlzIHR5cGljYWxseSBhIHNpdGUncyBtYWluIHBhZ2UuPC9wPgogICAgICAgIDxwPkEgZ29vZCBydWxlIG9mIHRodW1iIGlzIHRvIGNhbGwgdGhlIHBhZ2Ugd2hpY2ggY29udGFpbnMgdGhpcyBmcmFtZSBpbmZvcm1hdGlvbiAiaW5kZXguaHRtbCIgYmVjYXVzZSB0aGF0IGlzIHR5cGljYWxseSBhIHNpdGUncyBtYWluIHBhZ2UuPC9wPgogICAgICAgIDxwPkEgZ29vZCBydWxlIG9mIHRodW1iIGlzIHRvIGNhbGwgdGhlIHBhZ2Ugd2hpY2ggY29udGFpbnMgdGhpcyBmcmFtZSBpbmZvcm1hdGlvbiAiaW5kZXguaHRtbCIgYmVjYXVzZSB0aGF0IGlzIHR5cGljYWxseSBhIHNpdGUncyBtYWluIHBhZ2UuPC9wPgogICAgICAgIDxwPkEgZ29vZCBydWxlIG9mIHRodW1iIGlzIHRvIGNhbGwgdGhlIHBhZ2Ugd2hpY2ggY29udGFpbnMgdGhpcyBmcmFtZSBpbmZvcm1hdGlvbiAiaW5kZXguaHRtbCIgYmVjYXVzZSB0aGF0IGlzIHR5cGljYWxseSBhIHNpdGUncyBtYWluIHBhZ2UuPC9wPgogICAgICAgIDxwPkEgZ29vZCBydWxlIG9mIHRodW1iIGlzIHRvIGNhbGwgdGhlIHBhZ2Ugd2hpY2ggY29udGFpbnMgdGhpcyBmcmFtZSBpbmZvcm1hdGlvbiAiaW5kZXguaHRtbCIgYmVjYXVzZSB0aGF0IGlzIHR5cGljYWxseSBhIHNpdGUncyBtYWluIHBhZ2UuPC9wPgogICAgICAgIDxwPkhlcmUncyB3aGF0IGl0IHdvdWxkIGxvb2sgbGlrZUEgZ29vZCBydWxlIG9mIHRodW1iIGlzIHRvIGNhbGwgdGhlIHBhZ2Ugd2hpY2ggY29udGFpbnMgdGhpcyBmcmFtZSBpbmZvcm1hdGlvbiAiaW5kZXguaHRtbCIgYmVjYXVzZSB0aGF0IGlzIHR5cGljYWxseSBhIHNpdGUncyBtYWluIHBhZ2UuCiAgICAgICAgPHA+QSBnb29kIHJ1bGUgb2YgdGh1bWIgaXMgdG8gY2FsbCB0aGUgcGFnZSB3aGljaCBjb250YWlucyB0aGlzIGZyYW1lIGluZm9ybWF0aW9uICJpbmRleC5odG1sIiBiZWNhdXNlIHRoYXQgaXMgdHlwaWNhbGx5IGEgc2l0ZSdzIG1haW4gcGFnZS48L3A+CiAgICAgICAgPHA+QSBnb29kIHJ1bGUgb2YgdGh1bWIgaXMgdG8gY2FsbCB0aGUgcGFnZSB3aGljaCBjb250YWlucyB0aGlzIGZyYW1lIGluZm9ybWF0aW9uICJpbmRleC5odG1sIiBiZWNhdXNlIHRoYXQgaXMgdHlwaWNhbGx5IGEgc2l0ZSdzIG1haW4gcGFnZS48L3A+CiAgICAgICAgPHA+QSBnb29kIHJ1bGUgb2YgdGh1bWIgaXMgdG8gY2FsbCB0aGUgcGFnZSB3aGljaCBjb250YWlucyB0aGlzIGZyYW1lIGluZm9ybWF0aW9uICJpbmRleC5odG1sIiBiZWNhdXNlIHRoYXQgaXMgdHlwaWNhbGx5IGEgc2l0ZSdzIG1haW4gcGFnZS48L3A+CiAgICAgICAgPHA+QSBnb29kIHJ1bGUgb2YgdGh1bWIgaXMgdG8gY2FsbCB0aGUgcGFnZSB3aGljaCBjb250YWlucyB0aGlzIGZyYW1lIGluZm9ybWF0aW9uICJpbmRleC5odG1sIiBiZWNhdXNlIHRoYXQgaXMgdHlwaWNhbGx5IGEgc2l0ZSdzIG1haW4gcGFnZS48L3A+CiAgICAgICAgPHA+QSBnb29kIHJ1bGUgb2YgdGh1bWIgaXMgdG8gY2FsbCB0aGUgcGFnZSB3aGljaCBjb250YWlucyB0aGlzIGZyYW1lIGluZm9ybWF0aW9uICJpbmRleC5odG1sIiBiZWNhdXNlIHRoYXQgaXMgdHlwaWNhbGx5IGEgc2l0ZSdzIG1haW4gcGFnZS48L3A+CiAgICA8L2JvZHk+CjwvaHRtbD4KCg==">
    </frameset>

See this in action

If your browser supports the “data:text/html;charset=UTF-8,” type (webkit seems to like this better than others) you can make this even easier, and embed your normal HTML, straight into the original page.

This will work somewhat similarly to a resizable-div, but using 1998-level technology.


<frameset cols="30%,*">
        <frame src="data:text/html;charset=UTF-8,<html>
    <head>
        <title>Frame Content</title>
    </head>
    <body bgcolor='#DDDDDD'>
        <p>Here's what it would look likeA good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>Here's what it would look likeA good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>Here's what it would look likeA good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
        <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
    </body>
</html>">
        <frame src="data:text/html;charset=UTF-8,
<html>
    <head>
        <title>Frame Menu</title>
        <base target='content'>
    </head>
    <body bgcolor='#0099DD'>
        <a href='http://www.yahoo.com' class='menu'>Yahoo.com</a><br />
        <a href='http://www.google.com' class='menu'>Google.com</a><br />
        <hr />
        <a href='http://www.ebay.com' class='menu'>Ebay.com</a><br />
        <a href='http://www.fandango.com' class='menu'>Fandango.com</a><br />
    </body>
</html>">
    </frameset>

See this in action

Why would I use this?

Honestly, I don’t think that anyone should 😉
But it does have certain advantages over “Splitter” style javascript –

  • It’ll work without JS enabled
  • It’s compatible with old browsers
  • The browser does the work of resizing, rather than requiring it to happen in JS



In all, it’s a fun hack, and I figured it might appeal to other people who haven’t forgotten about some of the older layers still with us in our browsers.

Of course, while it might work in Netscape 3.0, like anything fun, it doesn’t work in older versions of IE.

Advertisements
Read more from Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: