Be Circle Podcast: Facebook, Widgets, iFrames and IE Pain.

Audio Podcast: 

You are missing some Flash content that should appear here! Perhaps your browser cannot display it, or maybe it did not initialize correctly.

In today's blog post I try something completely different: a podcast. To listen, just click on the player above.
Today I talk about

  • Facebook cookies.
  • P3P policies and the P3P policy hack
    <?php header('P3P: CP="HONK"'); ?>
  • Internet Explorer pain (what else is new). Specifically iFrames. Example after the jump

Internet explorer is fussy about inserting iFrames into a page and then trying to set the iFrame's attributes after its been added to the DOM.

//This won't work the way you expect it to in IE - the iframe border will always show up
//
//lets say I want to inject an iFrame into the DOM
$myWidgetContainer = $('#my-widget-container');
//
//I try something like this with jQuery
$myWidget = $myWidgetContainer.append('<iframe id="my-widget"></iframe>').find('#my-widget');
//
//then I want to set some attributes for this new iFrame
//I pick some attributes
myIFrame.attributes = {height: 500, width: 300, frameBorder: 0, scrolling: 'no', src:'http://example.com'};
//
//I modify the iFrame
$myWidget.attr(myIFrame.attributes);

If you don't want the iFrame to have a border, you need to create the iFrame first and then set the frameBorder (*NOTE* caseSensitive) and scrolling attributes BEFORE inserting the iFrame into the DOM.


//This WILL work the way you expect it to in IE
//
//lets say I want to inject an iFrame into the DOM
$myWidgetContainer = $('#my-widget-container');
//
//first I create an element by hand
myIFrame = document.createElement('iframe');
myIFrame.frameBorder = 0;
myIFrame.scrolling = "no";
myIFrame.id = "my-widget";
//
//jQuery allows me to append a hand built DOM element
$myWidget = $myWidgetContainer.append(myIFrame).find('#my-widget');
//
//then I want to set some attributes for this new iFrame
//I pick some other attributes
myIFrame.attributes = {height: 500, width: 300, src:'http://example.com'};
//
//I modify the iFrame with those additional attributes
$myWidget.attr(myIFrame.attributes);

January 9th 2010 11AM
By: andre

 

Comments

IE7 Iframes

Many thanks for covering that. 5 hours of my life wasted with CSS etc. before I found your explanation - ten minutes to change my code and move on.

No download link?!

No download link?!