Fatal编程技术网
  • javascript/
  • 如何用div和Javascript替换iframe？

如何用div和Javascript替换iframe？

javascript iframe html

如何用div和Javascript替换iframe？,javascript,iframe,html,Javascript,Iframe,Html,我有一个将外部HTML页面加载到iFrame中的页面。我在这方面面临两个问题： iFrame始终是固定高度，但我希望它能够扩展 垂直方向取决于内容的高度 iFrame中的内容无法继承CSS样式 附加到包含它的HTML页面。中的HTML iFrame必须有自己的链接或单独的样式表 我可能在这两点上都错了，所以如果我错了，请让我知道，然后我将继续使用iFrame 否则，是否有一个简单的Javascript调用可以将外部HTML文件加载到DIV 我想说清楚，似乎有些人误解了我： 我在问如何用DIV和J

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

  • iFrame始终是固定高度，但我希望它能够扩展 垂直方向取决于内容的高度
  • iFrame中的内容无法继承CSS样式 附加到包含它的HTML页面。中的HTML iFrame必须有自己的链接或单独的样式表
    • 我可能在这两点上都错了，所以如果我错了，请让我知道，然后我将继续使用iFrame

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

    我想说清楚，似乎有些人误解了我：

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

    （我认为这是相当普遍的，但我在本网站和网站上发现的大多数问题和信息似乎都是针对具体情况的，并要求提供我不需要的附加功能，这会使问题变得复杂。但是，如果我遗漏了什么，这是一个重复的问题，如果我关闭了它，我不会生气。）

  • 使用可动态调整iframe的大小

  • 不能在iframe中重新设置内容的样式。您计划使用iframe做什么？通常有更好的方法来解决问题

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

    $.get（'yourPage.html'，函数（数据）{
$（'#yourDiv'）.html（数据）；
});
    

    阅读更多信息：
    我实际上写了一个不同问题的答案，似乎适用于这里：
    
您已经有了一个服务器，它将向您返回信息——您可以将此信息放在
    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>

    

    
函数getAreaInfo（id）
{
var infoBox=document.getElementById（“infoBox”）；
if（infoBox==null）返回true；
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState！=4）返回；
如果（xhr.status！=200）警报（xhr.status）；
infoBox.innerHTML=xhr.responseText；
};
open（“GET”、“info.php？id=“+id，true”）；
xhr.send（空）；
返回false；
}
#信息箱{
边框：1px实心#777；
高度：400px；
宽度：400px；
}
AJAX测试
    
点击一个链接。。。

    
这里是信息的去向
    

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

    

    

    
希望这有帮助
    
我在问如何用DIV和Javascript替换iframe以获得我上面提到的功能。我不是在寻找让iFrame表现不同的方法
    
如果您想要上述功能，则不必更换iframe。iframe的功能2更容易实现。对于功能1，您有两个选择：
    

  • 将iframe放在DIV中，使用css规则，如绝对位置和相对高度加100%
    • 

  • 添加一个javascript函数来处理窗口对象的调整大小事件，以调整iframe的大小
    • 
从
    

    这个解决方案救了我一天。
    1。如果我理解正确，您希望iframe的高度取决于它自己的实际内容。这是不可能的。2.iFrame不继承其父页面的样式。外部HTML页面是否完整？也就是说，它是否有、和/或标签？如果有，可能需要整理一下。@AndrewLeach:现在有，但我可以把所有的东西都拿出来，只留下标签里的东西。事实上，我更愿意这样做，这样加载到中的内容将继承包含页面的所有CSS。对于那些选择iFrame选项的人，他们可以使用这个iFrame大小调整器库来动态调整内容。这里是iFrame Resizer的链接-您可以使用javascript在iFrame中重新设置内容的样式：google将告诉您如何进行。另外，没有jQuery标记。。。尝试用JavaScript解决方案回答。。。jQuery所做的任何事情都可以用纯JS来完成，它工作得非常完美，而且实现起来非常简单，因为我碰巧已经在使用jQuery了。感谢您提供所需的准确代码。

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