Question

我有一个页面可以将外部HTML页面加载到iFrame中。我面临两个问题：

iFrame始终是固定高度，但我希望它能够扩展垂直取决于内容的高度。
iFrame中的内容无法继承CSS样式附加到包含它的HTML页面。里面的HTML iFrame必须拥有自己的链接或单独的样式表。

我对这两点中的任何一点都错了，所以如果我，请告诉我，然后我将继续使用iFrame。

否则，是否有一个简单的 Javascript 调用，可以将外部HTML文件加载到 DIV ？

只是要明确，因为似乎有些人误解了我：

我要求如何用DIV和Javascript 替换iframe，以获得我上面提到的功能。我不正在寻找使iFrame表现不同的方法。

（我认为这是相当普遍的，但我在本网站和网站上发现的大多数问题和信息似乎都是针对特定情况的，并要求提供我不需要的其他功能。使问题变得复杂。但是，如果我错过了某些内容并且这是重复的话，如果关闭它我不会被冒犯。）

Answer 1

您可以进行ajax调用以获取您的html页面并将其添加到div中。例如，使用JQuery：

$.get('yourPage.html', function(data) { $('#yourDiv').html(data); });

阅读详情：http://api.jquery.com/jQuery.get/

Answer 2

我实际上写了一个不同问题的答案，这似乎适用于此：https://stackoverflow.com/a/10012302/166661

您有一台服务器会返回给您的信息 - 您可以将此信息放在IFRAME ...或者您可以调用JavaScript函数来检索该信息并将其显示在某个位置（ DIV）您在页面上留出了空白。

以下是一个示例HTML页面，它将使用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>

这是info.php，它将信息返回给HTML页面：

<?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.";
?>

希望这有帮助！

Answer 3

我要求如何用DIV和Javascript 替换iframe，以获得我上面提到的功能。我不正在寻找使iFrame表现不同的方法。

如果您想要提到的功能，则无需替换iframe。使用iframe，功能2更容易。至于功能1，您有两种选择：

将您的iframe放入DIV并使用css规则，例如位置绝对和相对加上高度为100％
添加一个javascript函数来处理窗口对象的resize事件以调整iframe的大小

Answer 4

Info.plist

来自How To Isolate a div from public CSS styles?

这个解决方案节省了我的一天。

Answer 5

使用jQuery plugin动态调整iframe的大小。
您无法在iframe中重新设置内容。您打算如何使用iframe？通常有更好的方法来解决问题。

我怎样才能用div和Javascript替换iframe？

5 个答案: