是否可以（可能使用 javascript）在不加载不同 HTML 页面的情况下更改 HTML 页面内容？ [关闭]答案

【问题标题】：Is it possible (probably with javascript) to change the HTML page content without loading a different HTML page? [closed]是否可以（可能使用 javascript）在不加载不同 HTML 页面的情况下更改 HTML 页面内容？ [关闭]
【发布时间】：2020-11-26 22:55:17
【问题描述】：

所以我最近才开始做网页设计。我的 index.html 有一个菜单（包含指向不同页面的链接）。 index.html 页面上的菜单（以非常简化的方式，没有 css 之类的东西）看起来像这样：

<ul>
<li><a class="active" href="index.html"></li>
<li><a href="contactus.html"></li>
<li><a href="help.html"></li>
<ul>
and then there is the content of the page (text, slideshow, images...) - say 
<div>
<h1><img><p><script>  
</div>

contactus.html 页面如下所示：

<ul>
<li><a href="index.html"></li>
<li><a class="active" href="contactus.html"></li>
<li><a href="help.html"></li>
<ul>
and then there is the content of the page (text, slideshow, images...) - say 
<div>
<h1><img2><p><script>

当您单击该链接时，它会将您带到另一个页面。假设我们有 index.html，我们点击菜单中的一个链接，它会引导我们到 contactus.html。它改变了页面，contactus.html 必须加载。问题是：是否有可能让contactus.html的内容出现在index.html上（并替换它），但不需要加载另一个页面？我做了一些研究，发现了一些关于 innerHTML 的东西，但我无法真正理解如何使用它。不久前我开始使用js。我希望这个问题是有道理的。非常感谢您的建议和建议。

【问题讨论】：

是的，有可能
如果我可以问怎么办？
这样做（用另一个页面替换索引的全部内容）不会给你任何优势，你正在有效地加载另一个页面。您可能想要的是加载单个内容片段并更新当前页面，这可以通过多种方式完成......从使用 jQuery 进行简单的 ajax 和 dom 操作到使用 Sveltejs、Angular、Vuejs 的完整标记的单页应用程序, React 和其他框架。
最简单的方法是使用ajax，但这需要一些php知识。
是的，这是可能的，但这并不是很有效。 ReactJs、Angular、VueJs 和类似的东西可以帮助你有效地做到这一点。

标签： javascript html innerhtml

【解决方案1】：

是的。 document.body.innerHTML = "<p>Some new HTML!</p>"。还有很多其他的方法。我喜欢 React，但它肯定有学习曲线。我不知道真正的 Web 开发人员是否还在使用 jQuery，但它使许多 DOM 操作变得非常容易。祝你好运！

【讨论】：

非常感谢！请问我该如何在代码中实现它？
同样，有很多可能性，但也许最简单的方法是，将您的联系方式链接更改为 <a onclick="contactus()">，然后使用 javascript 函数：function contactus() { document.body.innerHTML = ...} 转义引号的需要可能会变得很棘手，即我喜欢 React 的部分原因。无论如何，我并不是说这是一种好的方式来做你所要求的，但它应该对你来说很容易，它会立即改变内容。
不，我们真正的开发人员添加了 50% 的毫无意义的搜索查询以附加 -jquery。这是一场可怕的灾难，与 WordPress 一样令人讨厌。另外从不使用innerHTML，因为它不是标准的，而且它是地狱般的错误，但只有在你有大量依赖你的客户并且突然你意识到你的代码中有一千个实例之后你认为可靠的数据中有 90% 被发现是损坏的。

【解决方案2】：

您使用什么服务器？您对 html 文件使用 apache 或 ngnix 吗？您可以获取“Contacts.html”的内容并将内容的html替换为它。

例如：

$.get("contacts.html", function(data, status){
    document.getElementById("content").innerHTML = data;
});

此代码使用 jQuery 处理 ajax 请求，您可以仅使用 javascript 来使用 XMLHttpRequest。注意：您不应该只运行 html。如果没有 html 服务器，这将无法工作。干杯。

【讨论】：

【解决方案3】：

这将是一个非常简单的答案，因为它是一个巨大的论据......但让我们从一些基础开始。

目标是，从网页（index.html）开始，加载一些内容并只更新当前页面中的部分内容。

我将为等式的客户端和服务器端提出两种不同的方法。

jQuery + HTML 片段

这种方法的想法是使用 jQuery 来管理 AJAX 请求以从服务器检索一些内容并更新当前页面的 DOM 以显示新内容。

服务器端

这里你需要暴露一些内容，在最简单的情况下，它可以只是一个 html 片段，如下所示：

fragment.html

<p>My asynchronously loaded content!<p>

上面的片段可以通过apache或nginx直接暴露为静态内容，也可以用PHP、Java、C#或任何对Web开发有良好支持的编程语言动态生成。

客户端

在客户端，我们希望通过 javascript 联系服务器并使用 AJAX 请求检索内容，然后更新 html。 jQuery 使我们能够同时做这两件事。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </head>
    <body>
        <h1>Home page</h1>

        <div id="content">
            <p>Welcome!</p>
        </div>

        <div>
            <button id="update-btn">Update content</button>
        </div>

    <script>
    $(document).ready(function() {
        $('#update-btn').click(function(){
            $.get('http://myserver/fragment.html').then(function(data) {
                $('#content').html(data);
            });
        });
    });
    </script>
    </body>
</html>

我们有一个 ID 为 content 的 div，我们将使用它作为新内容的目标，还有一个 ID 为 update-btn的按钮> 启动请求。

在<script> 块中，我们首先将click 事件与按钮相关联，以便在单击时我们使用jQuery get method 向服务器发送一个ajax 请求，并使用jQuery html method 更新html 内容.

Javascript 框架 + REST API

这绝对是一种更复杂的方法，完整的指南/示例超出了 SO 答案的范围（每个客户端框架和每个服务器端语言/框架都有数百页的书籍），但让我们探索一下这个想法背后的基本概念。

在前面的例子中，我们让服务器生成一个 html，然后客户端请求更多的 html 来更新自己。这里的基本思想是相同的，但关注点的分离更加清晰，服务器负责生成原始数据并将其发送到客户端（通常采用JSON 或XML 格式），并且客户端必须管理所有演示和用户交互方面。

作为一个例子，我们可以分析一下hacker-news get item api。

url结构为https://hacker-news.firebaseio.com/v0/item/{item-id}.json?print=pretty

我们可以使用 id 作为路径变量和一个名为 print 的可选查询参数发出 GET 请求，它会返回一些 JSON 数据。

例如我们可以curl https://hacker-news.firebaseio.com/v0/item/25213368.json?print=pretty 得到以下回复：

{
  "by" : "harporoeder",
  "descendants" : 8,
  "id" : 25213368,
  "kids" : [ 25224137, 25224226, 25224397 ],
  "score" : 31,
  "time" : 1606333258,
  "title" : "Use `nproc` and not grep /proc/cpuinfo",
  "type" : "story",
  "url" : "https://www.flamingspork.com/blog/2020/11/25/why-you-should-use-nproc-and-not-grep-proc-cpuinfo/"
}

一旦我们公开了我们需要的所有服务，就可以使用许多不同的框架和库来构建客户端。在第一种方法中，我们使用 jQuery，它适用于非常简单的用例，但当我们开始向应用程序添加复杂性时，编写和维护可能会变得很糟糕，这就是为什么有许多不同的框架来实现客户端，例如：@987654326 @、React、SvelteJS、Angular、Aurelia 等等。

每个 javascript 框架都有一个很大的学习曲线，您很可能还需要学习如何使用 Nodejs、NPM、转译器和捆绑器来利用整个现代 javascript 基础架构。

这不会是一段轻松的旅程，但如果你决定走这条路，你会学到一项宝贵的技能。

希望这能让您了解如何继续学习 Web 开发。

【讨论】：

从不ever 使用 jQuery，以及一般的框架和库，尤其是 jQuery。你最终会得到五个相互不兼容的版本，糟糕的性能以及因为你被困在维护地狱中而无法承担新的工作。所有浪费在学习框架上的时间都可以花在学习 纯 JavaScript 上，该框架不会在三个月内随某个新版本过期。我从头开始构建了一个完整的网络平台，所以我从经验中说出来。 :-)
一般来说是的，我同意，正如我所说，这是一种简单的方法，更好的选择是使用专门的框架。实际上，这完全取决于用例，我可能不会构建一个完整的 VueJS 应用程序来更改静态网站中按钮的颜色。

【解决方案4】：

This 是您使用 vanilla javascript 的答案。

index.js 文件是：

onclick = "changeHtml()";
const button = document.getElementById("btn");
button.addEventListener("click", function () {
  document.getElementById("app").innerHTML = `
  <h1>I'm another HTML</h1>
  <div >
  <p>Look at me</p>
  </div>
  `;
});

index.html 文件是：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <h1>Hello Vanilla!</h1>
      <div>
        <p>This is initial HTML</p>
        <button id="btn">Click Me!</button>
      </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

您可以更改 HTML 中任何标签的内容。比如<body>、<a>等

【讨论】：