Thursday 12th November 2009
by Sajith M.RIF you are facing problem with layout issues inside iframe (which is normally not there in normal pages) just test these things.
- Iframe is considered as a separate html page. So it needs all the basic tags, from html, head, body.
- It does not get styles from parent, so you need to add manually in the header
- Take care of javascript calls separated with parent and local (if anything related with parent , use parent. , for example, to access a jQuery script from parent use, parent.$.function_name)
- Avoid define styles inside body tag with <style> tags, place them in <head> tag
- To solve the layout issues, you must use the DOCTYPE tag at the beginning
- If you are using any autoheight scripts to control iframe height dynamically, remember, it may not work as expected in all browser. (jQuery autoheight plugin sometimes fails in OPERA)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
There is a saying that using iframe is a bad practise. I don’t know the fact, anyway gmail uses more than 5 iframes to implement all the features and works well. (See Gmail Architecture)
Wooow, this is cool. Thank you so much. I know it now.