Recently I have been working on working with a Facebook application which resides within an iframe. However, the application could change size as the UI state changed, and the iframe needed to change size to match.
Luckily for me Facebook provide a prebuilt solution for this which you can drop into your page with only a few lines of Javascript. They even provide a demo application.
Unluckily for me, after following Facebook’s instructions perfectly, the resizing didn’t work!
The behaviour I observed was:
| Google Chrome Internet Explorer |
The iframe would always open at 800px tall if the height of the |
| Mozilla Firefox | The iframe resizing worked perfectly ?! |
I confirmed that the demo application Facebook provided worked correctly in all browses, but I just couldn’t get mine to work the same. Eventually I removed lines from the Facebook demo application one-by-one until I discovered what caused my error.
In the end it turns out that it was simply a case of my application not specifying a DOCTYPE in the main html page. After I inserted the DOCTYPE tag from the demo application everything worked perfectly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
It’s a pity that Facebook didn’t mention anywhere in their documentation that this line is critical to the operation of the iframe resizing code. I’m glad things are working for me now though, and hopefully other people will be able to learn from my mistake.
]]>