13

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.)

Improve this question
4
  • 1
    1. If I understand correctly you want the iframe's height to depend on it's own actual content. This is not possible. 2. iframes don't inherit the styles of their parent page. Commented Apr 6, 2012 at 7:14
  • Is the external HTML page complete? That is, does it have <html>, <head> and/or <body> tags? If it does, it may need to be tidied up. Commented Apr 7, 2012 at 7:31
  • @AndrewLeach: It does at the moment, but I could take all that out and leave only what's within the <body> tags. In fact, I'd rather do that, so that the content that gets loaded into the <div> inherits all the CSS of the containing page. Commented Apr 7, 2012 at 11:19
  • For those who go for iFrame option, they may use this iFrame Resizer library to adapt the content dynamically. Here's the link to iFrame Resizer - github.com/davidjbradshaw/iframe-resizer Commented Jul 19, 2018 at 6:11

5 Answers 5

Reset to default
13

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This worked perfectly, and was simple to implement since I happened to already be using jQuery. Thanks for also providing the exact code necessary.
4

I actually wrote up an answer to a different question, that seems to apply here: https://stackoverflow.com/a/10012302/166661

You've got a server that will return to you information -- you could place this information in an IFRAME... or you can call a JavaScript function to retrieve that information and display it in a location (DIV) you set aside on your page.

Here is a sample HTML page that will retrieve information from the server using AJAX

<html>
<head>
<script type="text/javascript">
function getAreaInfo(id)
{
  var infoBox = document.getElementById("infoBox");
  if (infoBox == null) return true;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) return;
    if (xhr.status != 200) alert(xhr.status);
    infoBox.innerHTML = xhr.responseText;
  };
  xhr.open("GET", "info.php?id=" + id, true);
  xhr.send(null);
  return false;
}
</script>
<style type="text/css">
#infoBox {
  border:1px solid #777;
  height: 400px;
  width: 400px;
}
</style>
</head>
<body onload="">
<p>AJAX Test</p>
<p>Click a link...
<a href="info.php?id=1" onclick="return getAreaInfo(1);">Area One</a>
<a href="info.php?id=2" onclick="return getAreaInfo(2);">Area Two</a>
<a href="info.php?id=3" onclick="return getAreaInfo(3);">Area Three</a>
</p>
<p>Here is where the information will go.</p>
<div id="infoBox">&nbsp;</div>
</body>
</html>

And here is the info.php that returns the information back to the HTML page:

<?php
$id = $_GET["id"];
echo "You asked for information about area #{$id}. A real application would look something up in a database and format that information using XML or JSON.";
?>

Hope this helps!

Improve this answer

Comments

2 
#mydiv {
      all: initial; /* blocking inheritance for all properties */
}

from How To Isolate a div from public CSS styles?

This solution saved my day.

Improve this answer

Comments

0

  1. Use a jQuery plugin to resize the iframe dynamically.

  2. You can't restyle content inside a iframe. What are you planning on using the iframe for? There are often better ways to solve things.

Improve this answer

1 Comment

You CAN restyle content inside an iFrame using javascript: stackoverflow.com/questions/251420/… and google will tell you how. Also, there is no jQuery-tag... try to answer with a JavaScript solution... anything jQuery does, can be done with pure JS, too
0

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.

If you want the functionality mentioned you don't have to replace the iframe. The functionality 2 is easier with an iframe. As for functionality 1, you have two choices:

  1. Put your iframe in a DIV and play with css rules like position absolute and relative plus height at 100%

  2. Add a javascript function to handle the resize event of the window object to resize the iframe

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.