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

September 06, 2023 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><scripttype="text/javascript">functiongetAreaInfo(id)
{
  var infoBox = document.getElementById("infoBox");
  if (infoBox == null) returntrue;
  var xhr = newXMLHttpRequest();
  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);
  returnfalse;
}
</script><styletype="text/css">#infoBox {
  border:1px solid #777;
  height: 400px;
  width: 400px;
}
</style></head><bodyonload=""><p>AJAX Test</p><p>Click a link...
<ahref="info.php?id=1"onclick="return getAreaInfo(1);">Area One</a><ahref="info.php?id=2"onclick="return getAreaInfo(2);">Area Two</a><ahref="info.php?id=3"onclick="return getAreaInfo(3);">Area Three</a></p><p>Here is where the information will go.</p><divid="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

Html5 Lite