facebook app all integrated in one page (no reloading)

I am currently developing UI for a facebook app. Basically, the game is shown on the canvas page and it has navigation in a tab form.

What I need is that when a user clicks "friends" to invite people, the page will show over the game(the game is still in background, and running as it should be). So the page must not reload. To do this I placed the url of the friends requests in the src of an <iframe> and using jquery to hide/show the divs but the problem is the <iframe> will also contain the header, footer and all like facebook.com, but I just want the content because the user is already on facebook. Is there a better approach than what I'm d开发者_运维知识库oing? How would I accomplish this?

A good visual example is the navigation of "City of Wonders" facebook app.

You'll need to write a server side script that uses the facebook API to get a list of friends. Then you simply generate the HTML that is necessary to display and use this information.

Also, instead of using a an <iframe></iframe>you could just use a <div>, and use javascript to populate it's innerhtml (via ajax).