![Learn How To Be A Successful Blogger [Blogging With Success]](http://bloggingwithsuccess.net/wp-content/uploads/2009/10/bwsthesislogo.png)
Okay, what is an iframe? How will I know if it breaks? How can I fix it?
Only recently did I realize I should know more about iframes. Often your knowledge expands out of necessity --- when a problem hits you square in the face! Read this article, and store it in your memory to be called up when you face a similar problem.
The Problem
I had finally selected a good service, ChatRoll.com, to support my client's new Chat Room. But try as I might, I could not embed the virtual chat room within a page! WP seemed to gobble up the html code, leaving only the link for a pop-up version. Sort of reminded me of the post on helping Html to escape WP's built-in editors.
Definition of IFrame:
An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert (interactive) content from another source, such as an advertisement. ... an IFrame behaves like an inline image ... - TechTarget
The Chat Room software provided code that contains an IFrame html tag to embed the interactive document (chat room). Such software often uses AJAX - Asynchronous JavaScript and XML. One of the prime examples is a Google Maps IFrame. If the IFrame software changes, site owners don't have to upgrade anything in the post.
The Solution
As happens with Serendipity, while searching for an unrelated plugin, I discovered one that could solve my problem. It's called "Insere Iframe" (Insert IFrame). Basically, it stops WP from stripping your code. Instead, you use a shortcode framed in square brackets to escape WP's axe.
Here's what I wanted my code to look like:
<iframe width='750' height='600' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' allowtransparency='true' src='http://chatroll.com/unitedswap-room/embed?fgcolor=4076b3&bgcolor=ffffff&textbgcolor=ffffff&textfgcolor=000000&sound=1&border=1&w=$0'></iframe>
Instead, WP removed all of the above! Without a word!
The Plugin version: (see differences highlighted in red)
[iframe: width='750' height='600' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' allowtransparency='true' src='http://chatroll.com/unitedswap-room/embed?fgcolor=4076b3&bgcolor=ffffff&textbgcolor=ffffff&textfgcolor=000000&sound=1&border=1&w=$0']
Success
The Chat Room is now entirely within the post page:
Now you know all I know about IFrames and how to fix them, should something break or disappear! There's a WP plugin for everything! 
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=88d92571-d6d1-484a-bace-aed61b5df82c)
![About Writer [Blogging With Success]](http://bloggingwithsuccess.net/wp-content/uploads/2010/06/User.png "About Author")
About Author
![Related Posts [Blogging With Success]](http://bloggingwithsuccess.net/wp-content/uploads/2010/06/Document.png "Related Posts")
Related posts
{ 4 comments }
I still prefer to just try to avoid using iFrames wherever possible. Sure you might lose out on some widget functionality, but to me it's just so risky running iFrames pulling content from some third party. Both from a usability (their site could always go down/widget break) and security perspective.
There are many 'mainstream' sites that provide widgets with iframes. They don't get garbled up if we install the code in a sidebar. Seems the WP post problem is an editor bug whereby the code is lost if you switch from html to visual view. Leave it untouched in html view and it works — but we are only human and tend to go back into the (draft) post to edit text, etc… I'd appreciate any url references you have for general security issues around IFrames. I've used the static Google Map for years and it's an iframe.
Thanks.
Thanks a lot for sharing this post. I was not aware about Iframes in so details. Waiting for your next article about iframes.
Hi Ruchi, nice to see you again. If I find out any more info, I'd probably update this post or add a comment…