How exactly can I replace an iframe with a div and Javascript?

Question

I have a page that loads an external HTML page into an iFrame. There are two problems I am facing with this:

1. The iFrame is always a fixed height, but I want it to expand vertically depending on the height of the content.
2. The content inside the iFrame can not inherit the CSS styles attached to the HTML page that contains it. The HTML inside the iFrame has to have it's own link or separate style sheet.

I could be wrong about either of those points, so if I am, please let me know and then I will continue to use the iFrame.

Otherwise, is there a simple Javascript call that can load an external HTML file into a DIV?

Just to be clear, since it seems some people have misunderstood me:

I am asking how to replace an iframe with a DIV and Javascript in order to get the functionality I mention above. I am not looking for ways to make iFrames behave differently.

(I thought this would be fairly common, but most of the questions and information I've found in this site and on the web seems to be situation specific and asks for additional functionality that I don't need and complicates the issue. However, if I've missed something and this is a duplicate, I wouldn't be offended if this got closed.)

Answer 1

You can make an ajax call to fetch your html page and add it to the div. For example using JQuery:

$.get('yourPage.html', function(data) { $('#yourDiv').html(data); });

Read more at: http://api.jquery.com/jQuery.get/