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

前端未结

关注

 5  1943

再見小時候

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

相关标签:

5条回答

一整个雨季

2020-12-28 20:28
```
#mydiv {
      all: initial; /* blocking inheritance for all properties */
}
```
from How To Isolate a div from public CSS styles?

This solution saved my day.
0 讨论(0)
发布评论:

提交评论
- 加载中...

失恋的感觉

2020-12-28 20:31

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!

0 讨论(0)

余生分开走

2020-12-28 20:38

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/

0 讨论(0)
发布评论:

提交评论
- 加载中...
孤城傲影

2020-12-28 20:40
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
心在旅途

2020-12-28 20:44
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...