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:

The iFrame is always a fixed height, but I want it to expand vertically depending on the height of the content.
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.)

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. — methodofaction, Apr 06 '12 at 07:14
Is the external HTML page complete? That is, does it have , and/or tags? If it does, it may need to be tidied up. — Andrew Leach, Apr 07 '12 at 07:31
@AndrewLeach: It does at the moment, but I could take all that out and leave only what's within the tags. In fact, I'd rather do that, so that the content that gets loaded into the
inherits all the CSS of the containing page. — Questioner, Apr 07 '12 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 - https://github.com/davidjbradshaw/iframe-resizer — JeeShen Lee, Jul 19 '18 at 06:11

score 13 · Accepted Answer · answered Apr 06 '12 at 17:50

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/

answered Apr 06 '12 at 17:50

user587174

191
2

This worked perfectly, and was simple to implement since I happened to already be using jQuery. Thanks for also providing the exact code necessary. – Questioner Apr 09 '12 at 14:04

score 4 · Answer 2 · edited May 23 '17 at 12:14

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!

score 2 · Answer 3 · edited May 23 '17 at 12:08

2

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

from How To Isolate a div from public CSS styles?

This solution saved my day.

edited May 23 '17 at 12:08

Community

1
1

answered Aug 10 '16 at 02:42

Bishoy Hanna

4,539
1
29
31

score 0 · Answer 4 · answered Apr 06 '12 at 07:15

0

Use a jQuery plugin to resize the iframe dynamically.
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.

answered Apr 06 '12 at 07:15

Victor Bjelkholm

2,177
9
28
50

1

You CAN restyle content inside an iFrame using javascript: http://stackoverflow.com/questions/251420/invoking-javascript-in-iframe-from-parent-page 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 – Elias Van Ootegem Apr 06 '12 at 07:39

score 0 · Answer 5 · edited Oct 25 '14 at 07:19

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:

Put your iframe in a DIV and play with css rules like position absolute and relative plus height at 100%
Add a javascript function to handle the resize event of the window object to resize the iframe

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

5 Answers5

Linked