Dynamically creating an iframe in Internet Explorer for remote form submissions
Posted on May 13th, 2008 in General Web Dev, Internet Explorer, JavaScript | 3 Comments »
I’ve been doing a lot of remote iframe work as of late and while creating some functionality that submits a form to a dynamically generated iframe I quickly found that in IE6/7 you cannot target an iframe created with document.createElement('iframe');. You must instead use innerHTML to write out the iframe inside another element.
Oh IE, we will never understand you!
Update: Max commented that you can indeed use document.createEelement and still target iframes in IE, you just need to create them in this way document.createElement('<iframe name="iframeName">');. Still über quirky but slightly better than the innerHTML approach. Kudos Max!
3 Responses
This is not true. You most certainly can create an iframe in IE using .createElement(‘iframe’);
I know because I have apps that do this 2-3 times per page.
The tricks are:
1.) If you want to set the border to none, you need to set the “frameBorder” attribute to “0″ (yes, camel case is required for IE)
2.) If you want to target this frame, from within the regular page, you need to set the “name” attribute…. BUT you can’t do this in IE with .setAttribute(‘name’,'myIframe’);
Bug 235:
http://webbugtrack.blogspot.com/2007/10/bug-235-createelement-is-broken-in-ie.html
What you will need to do is create it (for IE only) like this…
document.createElement(”);
//in case this post gets mangled, replace the
//sqare brackets in the following line with angled brackets.
document.createElement(‘[iframe name="myIframe"]‘);
yes, it looks goofy and breaks spec, but this is IE.
For more info on what attributes you can and can’t set in IE using .setAttribute() see this bug (242)
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
Best of luck!
Max, thanks for dropping the knowledge on me. I’ve clarified my post a bit to specify I’m only talking about if you want to target a dynamically generated iframe – but regardless, I’ve verified that your method works, too, and I like it better.
[...] http://readystate4.com/2008/05/13/dynamically-creating-an-iframe-for-internet-explorer/ [...]