用外部页面替换innerhtml答案

【问题标题】：Replace innerhtml with external page用外部页面替换innerhtml
【发布时间】：2012-06-20 05:06:29
【问题描述】：

我有一个页面，它包含一个用于导航的标题 div、一个用于内容的内容 div 和一个仅包含一些静态信息的页脚 div。

这个想法是，当您单击标题栏中的某些内容时，内容 div 会相应地更改其内容。为了便于开发，我想将每个内容元素存储在自己的文件中。我该如何填写我在下面写的这个magicLoad 函数？

我目前没有使用任何框架（想到 jquery），但我肯定不反对使用一个。如果我在这里违反了其他最佳实践，我也很想知道，但我的主要目标是从外部页面加载。我该怎么做？

这是我现在设置的基本骨架模型。（当然不止这 3 个，但这些足以说明问题。）

<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>

【问题讨论】：

您正在寻找 Ajax。
@Truth 不，ajax 将是异步的。这是完全同步的。如果我想让其他人控制内容，那么 Ajax 将是一个很好的解决方案。
Ajax 可以非常同步。

标签： javascript innerhtml

【解决方案1】：

使用以下，简单直接

$('#which').load('test.html');

如果作为参数传入

$('#'+which).load('test.html');

【讨论】：

按语法我认为这是 JQuery？
如果 HTML 包含完整的 <head> 到 <body> 标记怎么办？在 div 中没有意义
您必须小心，这是您对当前规范的责任。它必须是partial page
所以这确实非常接近我想要的。基本上，which 确定了要加载的 html。所以我所做的是$('#content_div').load(which + '.html'); 但这引导我到了那里。谢谢！

【解决方案2】：

如果你想在一个网页中嵌入另一个网页，你应该考虑使用<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>

【讨论】：