How exactly can I replace an iframe with a div and

2020-02-22 14:49发布

站内问答 / JavaScript
1592 5 4

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

5条回答
劫难
2楼-- · 2020-02-22 15:06 
#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) 举报
等我变得足够好
3楼-- · 2020-02-22 15:08

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) 举报
不美不萌又怎样
4楼-- · 2020-02-22 15:12

  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) 举报
戒情不戒烟
5楼-- · 2020-02-22 15:14

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) 举报
We Are One
6楼-- · 2020-02-22 15:32

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)