Javascript 用外部页面替换innerhtml
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11113119/
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
Replace innerhtml with external page
提问by corsiKa
I have a page that consists of a header div for navigation, a content div for content, and a footer div that just has some static information.
我有一个页面，它由一个用于导航的标题 div、一个用于内容的内容 div 和一个只有一些静态信息的页脚 div 组成。
The idea is that when you click on something in the header bar, the content div changes its content accordingly. I'd like to store each content element in its own file, for ease of development. How can I go about filling in this magicLoadfunction I've written below?
这个想法是，当您单击标题栏中的某些内容时，内容 div 会相应地更改其内容。为了便于开发，我想将每个内容元素存储在自己的文件中。我该如何填写magicLoad我在下面写的这个函数？
I'm currently not using any framework (jquery comes to mind) but I'm certain not opposed to using one. If there's other best practices I'm violating here, I'm keen to know as well, but my primary goal is to load from an external page. How can I do this?
我目前没有使用任何框架（想到 jquery）但我肯定不反对使用一个。如果我在这里违反了其他最佳实践，我也很想知道，但我的主要目标是从外部页面加载。我怎样才能做到这一点？
Here's a basic skeleton mockup of my setup right now. (There's more than just those 3 of course, but those are enough to get the point across.)
这是我现在设置的基本骨架模型。（当然不止这三个，但这些足以说明问题。）
<html>
<script type="text/javascript">
function show(which) {
document.getElementById(which).innerHtml = magicLoad(which + ".html");
return false;
}
function showHome() { show('home'); return false;} // for onload
</script>
<body>
<div id="header">
<a href="javascript:void(0)" onclick="show('home')">HOME</a> |
<a href="javascript:void(0)" onclick="show('training')">TRAINING</a> |
<a href="javascript:void(0)" onclick="show('audits')">AUDITS</a>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
<script> window.onload=showHome; </script>
</html>
回答by Raab
use the following, simple and straight
使用以下，简单直接
$('#which').load('test.html');
if which is coming as parameter
如果哪个作为参数出现
$('#'+which).load('test.html');
回答by Alvin Wong
If you want to embed another webpage in one, you should think of using <iframe>.
Something like:
如果您想在其中嵌入另一个网页，您应该考虑使用<iframe>. 就像是：
<script type="text/javascript">
function show(which) {
document.getElementById(which).src=which+".html";
return false;
}
function showHome() { show('home'); return false;} // for onload
</script>
<iframe id="home"></iframe>
