Questioner Questioner - 3 months ago 39
HTML Question

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

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

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/

Comments