CODEWITHSUNDEEP
htmliframe
o_O
o_O

Reputation: 5737

Can someone explain iFrames?

My understanding of the iFrame is that the content inside is exactly what is included in the src. I've seen numerous widgets like Facebook etc that use an iFrame.

When I try using an iFrame, I have an HTML file with only a div and some content inside, no head, body, etc. Just the content in HTML. But the iFrame always loads the entire page and ends up giving me a recursive iFrame within an iFrame.

I don't see how this is since my HTML file that is referenced in the iFrame is just content and nothing else. I'm not including a header, footer but all that gets displayed anyway.

I've seen where people are talking about scrolling the iFrame to a certain section and even using the div's id in the src and setting the scrolling=no. This works, but my iFrame content will reload based on user input and once it reloads it returns to the top-left portion of the page inside the iFrame.

This doesn't make any sense. Maybe this is supposed to be a widget or something?

Edit for SD to show some formatted code: @Surreal Dreams

That's the strange thing. I'm using web2py so it might be something inherent in the backend that's causing that. The html file literally is a div wrapper with some elements inside. But I think the web2py is adding the header in there even though I'm not extending any kind of layout. I eventually did get it to work correctly by referencing the same html file saved offsite at another url. There it displayed properly without web2py interfering with the html structure.

What was happening before, I had code like this:

{{extend 'layout.html'}}
<div class="wrapper">
<page content>
<aside id="iFrame wrapper">
<iframe src="/rates.html"></iframe>
</aside>
</div>

And that's the basic structure of the web2py page where inside layout you have all your headers, footers, etc. Well what was happening is that it would generate the entire page, and where you get to the iFrame, it generates the page again inside that iFrame, and then on down to the iFrame again, which continues to infinity rendering the page inside each iFrame's page.

Upvotes: 0

Views: 1538

Answers (1)

Christophe
Christophe

Reputation: 28114

An iframe will always load an entire Web page, referenced in your iframe's src attribute. Even if your file only contains a div, I believe the browser considers it a full page and automatically adds a head and body.

"I've seen where people are talking about scrolling the iFrame to a certain section" => right, once the page in the iframe is loaded, you can use JavaScript to access and manipulate its DOM:

var myIframe = parent.document.getElementById("myIframe");
var window = myIframe.contentWindow;

Upvotes: 2

Related Questions