add content to iframe

Question

i am displaying a page inside a iframe.Following is the markup:

<iframe src="/home/index" width="700px" height="300px"/>

Now , using jquery i am trying to add content of another page to this iframe:

 $('iframe').bind('load',function()
{

$('iframe).contents().find('body').load('/user/profile');
});

Page (user/profile) content is getting rendered except javascript files i.e the head section of 'user/profile' page contains reference to javascript files like jquery.js,profile.js etc.I checked iframe's content in firebug.There is no reference to these js files. Please help.

Answer 1

When jQuery adds content containing script tags, those tags are removed. The code within them is executed without being inserted into the DOM. This is done because Internet Explorer will sometimes break when you try to do this.

What's more, you are asking why you aren't getting the contents of the head element on /user/profile added to the body of the iframe page. Are you really surprised that this doesn't work as you expect?

Since you are replacing the whole content of the iframe, why not change the page that it points to? I can't quite see why you're doing this with Javascript.

Answer 2

This won't work because you are putting the head element inside body - not how HTML works.

You could do

$('iframe').contents().find('html').load('/user/profile');

instead....

EDIT:

lonesomeday makes a very good point. Why not just change the iframes's src?

$('iframe').attr('src', '/user/profile');