Javascript 我们如何只更改网页的内部部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8079618/
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 can we change only inner part of a web page?
提问by Piscean
I am developing a web application, where headers and footers for all pages are the same. What I want to achieve, is to change only the part of the page between the header and the footer when a button in the header is clicked. For example, there are 3 buttons Home, Activities and Areas. If I click activities then header and footer of the page should remain the same and activities page should come in between header and footer. How can I do that?
我正在开发一个 Web 应用程序，其中所有页面的页眉和页脚都相同。我想要实现的是，当单击页眉中的按钮时，仅更改页眉和页脚之间的页面部分。例如，有 3 个按钮主页、活动和区域。如果我单击活动，则页面的页眉和页脚应保持不变，活动页面应位于页眉和页脚之间。我怎样才能做到这一点？
回答by Sthe
I agree with rlemon. I think jQuery/AJAX is what you are looking for. For example:
我同意 rlemon。我认为 jQuery/AJAX 是你正在寻找的。例如：
<html>
<head>
<!-- Include Jquery here in a script tag -->
<script type="text/javascript">
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("activities.html");
});
});
</script>
</head>
<body>
<div id="header">
<a href="#" id="activities">Activities</a>
<!-- this stays the same -->
</div>
<div id="body">
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
In this simple implementation, I have just created 2 simple HTML pages, index.html will be used as a template. And activities.html, which contains the content I want to load dynamically.
在这个简单的实现中，我刚刚创建了 2 个简单的 HTML 页面，index.html 将用作模板。还有activity.html，里面包含了我想动态加载的内容。
Therefore, if I click Activities, it should load activities.html into without reloading the entire page.
因此，如果我点击活动，它应该加载活动.html 而不重新加载整个页面。
You can download the jquery library from jquery.org
您可以从jquery.org下载 jquery 库
I haven't tested this, but it should work.
我还没有测试过这个，但它应该可以工作。
Hope it helps :-)
希望能帮助到你 ：-）
回答by diagonalbatman
When the page is delivered - Header + Body + Footer is merged. You are able to treat this as one page. So if you in your header called an element in your body say "Container" then providing you include it in the body section you will be able to modify it.
页面交付时 - 合并页眉 + 正文 + 页脚。您可以将其视为一页。因此，如果您在标题中调用正文中的元素说“容器”，然后将其包含在正文部分中，则您将能够修改它。
回答by Kevin Oluseun Karimu
Are you using PHP or Server-Side Pages? You could just have headers and footers as includes. Jquery is really complex for just wanting to include heads and footers on your page.
您使用的是 PHP 还是服务器端页面？您可以只包含页眉和页脚。Jquery 真的很复杂，因为只想在页面上包含页眉和页脚。
回答by rlemon
回答by JB Nizet
You need to make an AJAX request to the server. The server would answer with the HTML to "inject" between the header and the footer. And the AJAX callback hendler would replace the current content with the new one.
您需要向服务器发出 AJAX 请求。服务器会用 HTML 回答以在页眉和页脚之间“注入”。并且 AJAX 回调处理程序将用新内容替换当前内容。
All this is done for you by the shortcut loadfunction from jQuery. See http://api.jquery.com/load/
所有这些都是通过loadjQuery的快捷功能为您完成的。见http://api.jquery.com/load/
回答by Flo
create a div that contains the content, and give it a unique class or an id. Then in your jquery code bind a click event on the elements you want to use as navigation and in that bind use $("#div").load("page.php") or something like that to load content from another file into the div
创建一个包含内容的 div，并给它一个唯一的类或一个 id。然后在您的 jquery 代码中，在要用作导航的元素上绑定一个单击事件，并在该绑定中使用 $("#div").load("page.php") 或类似的内容将另一个文件中的内容加载到div
回答by Offirmo
Alternatively, this can be done with iframes. The parent page (with header and footer) can control the iframe and force it to navigate.
或者，这可以通过 iframe 来完成。父页面（带有页眉和页脚）可以控制 iframe 并强制它导航。
Tradeoffs:
权衡：
- This may be a bit slower (loading a full page)
- this may be simpler depending on your case
- 这可能会慢一点（加载整页）
- 根据您的情况，这可能更简单
