How Exactly Can I Replace An Iframe With A Div And Javascript?

August 31, 2022 Post a Comment

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 verticall

Solution 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); });

Solution 2:

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!

Solution 3:

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

from How To Isolate a div from public CSS styles?

This solution saved my day.

Solution 4:

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.

Solution 5:

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

JavaScript Gen