我究竟如何用 div 和 Javascript 替换 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10040297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How exactly can I replace an iframe with a div and Javascript?
提问by Questioner
I have a page that loads an external HTML page into an iFrame. There are two problems I am facing with this:
我有一个页面将外部 HTML 页面加载到 iFrame 中。我面临着两个问题：
- The iFrame is always a fixed height, but I want it to expand vertically depending on the height of the content.
- 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.
- iFrame 始终是固定高度，但我希望它根据内容的高度垂直扩展。
- iFrame 内的内容不能继承附加到包含它的 HTML 页面的 CSS 样式。iFrame 内的 HTML 必须有自己的链接或单独的样式表。
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.
我可能对这两点中的任何一点都错了，所以如果我错了，请告诉我，然后我将继续使用 iFrame。
Otherwise, is there a simple Javascriptcall that can load an external HTML file into a DIV?
否则，是否有一个简单的Javascript调用可以将外部 HTML 文件加载到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 Javascriptin order to get the functionality I mention above. I am notlooking for ways to make iFrames behave differently.
我在问如何用 DIV 和 Javascript 替换 iframe以获得我上面提到的功能。我不是在寻找使 iFrame 表现不同的方法。
(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.)
（我认为这很常见，但是我在本网站和网络上找到的大多数问题和信息似乎都是针对特定情况的，并且要求提供我不需要的其他功能并使问题复杂化。但是，如果我错过了什么并且这是重复的，如果它被关闭，我不会被冒犯。）
采纳答案by user587174
You can make an ajax call to fetch your html page and add it to the div. For example using JQuery:
您可以进行 ajax 调用以获取您的 html 页面并将其添加到 div。例如使用 JQuery：
$.get('yourPage.html', function(data) {
$('#yourDiv').html(data);
});
$.get('yourPage.html', function(data) {
$('#yourDiv').html(data);
});
Read more at: http://api.jquery.com/jQuery.get/
阅读更多信息：http: //api.jquery.com/jQuery.get/
回答by dldnh
I actually wrote up an answer to a different question, that seems to apply here: https://stackoverflow.com/a/10012302/166661
我实际上写了一个不同问题的答案，这似乎适用于这里：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.
您有一个将返回给您的信息的服务器——您可以将此信息放在IFRAME... 中，或者您可以调用 JavaScript 函数来检索该信息并将其显示在DIV您在页面上预留的位置 ( ) 中。
Here is a sample HTML page that will retrieve information from the server using AJAX
这是一个示例 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"> </div>
</body>
</html>
And here is the info.php that returns the information back to the HTML page:
这是将信息返回给 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.";
?>
Hope this helps!
希望这可以帮助！
回答by Bishoy Hanna
#mydiv {
all: initial; /* blocking inheritance for all properties */
}
from How To Isolate a div from public CSS styles?
This solution saved my day.
这个解决方案拯救了我的一天。
回答by Dominique Fortin
I am asking how to replace an iframe with a DIV and Javascriptin order to get the functionality I mention above. I am notlooking for ways to make iFrames behave differently.
我在问如何用 DIV 和 Javascript 替换 iframe以获得我上面提到的功能。我不是在寻找使 iFrame 表现不同的方法。
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:
如果您想要提到的功能，则不必替换 iframe。使用 iframe 可以更轻松地实现功能 2。对于功能 1，您有两种选择：
Put your iframe in a DIV and play with css rules like position absolute and relative plus height at 100%
Add a javascript function to handle the resize event of the window object to resize the iframe
将您的 iframe 放在 DIV 中并使用 css 规则，例如位置绝对和相对加高度 100%
添加一个javascript函数来处理window对象的resize事件来调整iframe的大小
回答by Victor Bjelkholm
Use a jQuery pluginto resize the iframe dynamically.
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.
使用jQuery 插件动态调整 iframe 的大小。
您不能在 iframe 内重新设置内容的样式。你打算用 iframe 做什么？通常有更好的方法来解决问题。
