Programming Ideas, Logics, Tips and Tricks » opera http://www.sajithmr.me Mon, 23 Jan 2012 15:44:09 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Just a second with Iframe http://www.sajithmr.me/just-a-second-with-iframe http://www.sajithmr.me/just-a-second-with-iframe#comments Wed, 11 Nov 2009 20:07:59 +0000 Mr Me http://www.sajithmr.me/?p=490 IF you are facing problem with layout issues inside iframe (which is normally not there in normal pages) just test these things.

flex-iframe-logo-128

  • 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)

]]> http://www.sajithmr.me/just-a-second-with-iframe/feed 1