13

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

  1. iFrame 始终是固定高度，但我希望它根据内容的高度垂直扩展。
  2. iFrame 内的内容不能继承附加到包含它的 HTML 页面的 CSS 样式。iFrame 中的 HTML 必须有它自己的链接或单独的样式表。

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

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

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

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

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

4

5 回答 5

12

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

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

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

于 2012-04-06T17:50:09.003 回答
4

我实际上写了一个不同问题的答案，这似乎适用于这里：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>

这里是将信息返回给 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.";
?>

希望这可以帮助！

于 2012-04-06T18:17:08.167 回答
2 
#mydiv {
      all: initial; /* blocking inheritance for all properties */
}

从如何将 div 与公共 CSS 样式隔离开来？

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

于 2016-08-10T02:42:34.143 回答
0

  1. 使用jQuery 插件动态调整 iframe 的大小。

  2. 您不能在 iframe 中重新设置内容的样式。你打算用 iframe 做什么？通常有更好的方法来解决问题。

于 2012-04-06T07:15:43.557 回答
0

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

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

  1. 将您的 iframe 放入 DIV 并使用 css 规则，例如绝对位置和相对位置以及 100% 的高度

  2. 添加一个javascript函数来处理window对象的resize事件来调整iframe的大小

于 2012-08-03T14:20:34.257 回答