如何用 div 和 Javascript 替换 iframe？答案

【问题标题】：How exactly can I replace an iframe with a div and Javascript?如何用 div 和 Javascript 替换 iframe？
【发布时间】：2012-04-19 21:12:03
【问题描述】：

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

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

这两点我都可能错了，如果我错了，请告诉我，然后我会继续使用 iFrame。

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

澄清一下，似乎有些人误解了我的意思：

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

（我认为这很常见，但我在本网站和网络上找到的大多数问题和信息似乎都是针对特定情况的，并且要求提供我不需要的其他功能，并且使问题复杂化。但是，如果我遗漏了某些东西并且这是重复的，那么如果它被关闭，我不会被冒犯。）

【问题讨论】：

1.如果我理解正确，您希望 iframe 的高度取决于它自己的实际内容。这不可能。 2. iframe 不继承其父页面的样式。
外部HTML页面是否完整？也就是说，它有、和/或标签吗？如果是这样，可能需要整理一下。
@AndrewLeach：目前确实如此，但我可以把所有这些都去掉，只留下标签中的内容。事实上，我宁愿这样做，以便加载到
的内容继承包含页面的所有 CSS。
对于那些选择 iFrame 选项的人，他们可以使用这个 iFrame Resizer 库来动态调整内容。这是 iFrame Resizer 的链接 - github.com/davidjbradshaw/iframe-resizer

标签： javascript iframe html

【解决方案1】：

使用 jQuery plugin 动态调整 iframe 的大小。
您不能在 iframe 中重新设置内容的样式。你打算用 iframe 做什么？通常有更好的方法来解决问题。

【讨论】：

您可以使用 javascript：stackoverflow.com/questions/251420/… 重新设置 iFrame 内的内容样式，Google 会告诉您如何操作。此外，没有 jQuery 标记...尝试使用 JavaScript 解决方案来回答...任何 jQuery 所做的，也可以用纯 JS 完成

【解决方案2】：

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

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

阅读更多：http://api.jquery.com/jQuery.get/

【讨论】：

这很好用，而且很容易实现，因为我碰巧已经在使用 jQuery。感谢您还提供了必要的确切代码。

【解决方案3】：

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

你有一个服务器会返回给你信息——你可以把这个信息放在IFRAME...或者你可以调用一个JavaScript函数来检索那个信息并将它显示在一个位置（@987654323 @) 你在你的页面上搁置了。

这是一个示例 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>

这里是将信息返回给 HTML 页面的 info.php：

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

希望这会有所帮助！

【讨论】：

【解决方案4】：

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

如果您想要提到的功能，您不必替换 iframe。使用 iframe 功能 2 更容易。至于功能一，你有两种选择：

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

【讨论】：

【解决方案5】：

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

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

这个解决方案拯救了我的一天。

【讨论】：