Just a Theory: Embed HTML on Your Site

Embed HTML on Your Site

If you’re a regular visitor to my blog (and who could blame you?), you likely have noticed a few changes recently. In addition to adding the sociable links a couple days ago, I’ve also been adding bits of embedded JavaScript in the right column displaying my three most recent Tweets and my three most recent Delicious bookmarks. These work reasonably well: I just embed <script> tags with the appropriate stuff, then style the HTML that they deliver.

Tonight I was talking to Skud about embedding like this. It turns out that some folks were getting a big blank area when they viewed a blog entry on her site in RSS readers and the like, they sometimes just saw a big blank area where there was supposed to be a list of books. She was looking for examples of sites that provided HTML snippets that people could cut-n-paste into their blog entries, so that they can avoid this problem, or use it in places that disallow JavaScript embedding, such as LiveJournal. I had no examples for her, but it suddenly occurred to me: Why not embed a link to an HTML URL that serves a snippet of HTML, rather than a bit of JavaScript that uses the document object to write HTML?

A quick Googling and I found a page a great article about the <object> element. It was intended as a general replacement for the <img> and <applet> elements, although tht really hasn’t happened. But what you can do is embed HTML with it. Here’s a quick example:

Hopefully you can see the embedded HTML above. I’ve styled it with a light blue background and dark blue dotted border, so it stands out. That styling is in the <object> tag, BTW, not in the HTML loaded from the snippit. I’m sure I could figure out how to add <param> tags that would tell it to include various styles, too, since it appears that CSS I have in this page has no effect on the content of the object (I have some CSS to make the <code> tag have a green background, but for me at least, it has no effect.

So why isn’t this more common? It seems to work well in a lot of browsers. Would you use it? What are the downsides?

Tags:

Comments & Trackbacks

João Miguel Neves wrote:

Security Alerts

It won't be automatic for NoScript users (not that that will be a big problem).

More serious is that happens when the domain stops working. You are presenting content from another site inside your site without distinction. If a domain changes owner, your site might start presenting something unexpected to your users.

In a link, the usual user understands that he was directed to a wrong site, in an integrated object the same does not apply.

Marcus Ramberg wrote:

Doesn't work in feed readers.

Or at least Google Reader. Flash embeds are supported tho. All in all, this thing is a big mess. I kind of liked vox' solution of sandboxing the javascript embeds into a separate iframe, so that it can't touch the rest of your page.

Cd-MaN wrote:

+1 for Marcus

While it is a neat technique, I have to concur with Marcus: it doesn't work in Google Reader. As I discovered ( http://hype-free.blogspot.com/2008/11/google-reader-javascript-and-flash.html ), Google Reader filters embed/object tags on a whitelist basis, and personal sites are very unlikely to make the cut, unless they become very popular.

Theory wrote:

Replies

João Miguel: What you say is true, but it's also true of the JavaScript embeds that people already use. See my right-hand column for examples.

Marcus: I completely agree that it's a mess. Sandboxing is definitely a good idea.

Cd-MaN: I'm not a Google Reader user, but I suspect that any old embedded JavaScript doesn't work, either. But there's no reason why a site like Twitter couldn't provide an URL that returns an embeddable HTML snippet, just as it now provides a URL that returns embeddeable JavaScript, and sites can choose to whitelist it or not (just as I'm sure they whitelist embeddable JavaScript).

The only downsides I see to this approach are:

You can't style the returned HTML. You'd have to send parameters in your request and get back an HTML snippet with such styles included in it.

I don't see a way to style the height of the <object> so that it automatically resizes to the length of the content, aside from using some sort of JavaScript call to do it.

Still, I think that there's promise here.

—Theory

Ricardo Signes wrote:

Goodbye, IFRAME?

I don't suppose there's a big benefit to OBJECT over IFRAME, but I still am pleased at learning that I can make a text/html object element. We use IFRAME objects to display email messages on a page with styling intact, as it quarantines the CSS from bubbling up into the page. An object element can do the same thing... I can't see any real reason to switch, but it's nice to think that in the future we can be free of frames, i- or otherwise.

(It's also useful to know that like an iframe the content-type of an object is ultimately determined by the server, not by the element's type attribute.)

Discussion is now closed.

Just a Theory

Embed HTML on Your Site

Comments & Trackbacks

Security Alerts

Doesn't work in feed readers.

+1 for Marcus

Replies

Goodbye, IFRAME?

Syndicate

Where I work

Twitterstream

Technorati

Stuff I Read

Code

vCard