使用 JavaScript 使用不同的网址创建网页

Question

我使用 JavaScript 创建了一个自定义元素。此自定义元素已添加到我的 HTML 页面中。当用户单击此元素时，应将用户定向到新页面。该页面应使用 JavaScript 动态创建。

我了解如何通过清除当前页面并添加新元素来创建此页面。但是，我想更改网址并将用户重定向到一个全新的页面。

我创建了一个对象数组。我想编写一个代码块，并从该代码块中为对象数组中的每个对象创建一个单独的页面。

例如：

const myArray = [{object: "First Object",},{"Second Object"},{"Third Object"},{"Fourth Object"},{"Fifth Object"}];
const customElements = window.customElements;

class MyElement extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `<a href="page2.html">${myArray.object}</a>`;
    }}
customElements.define("header-element",MyElement);

在这个例子中，我编写了一些 JavaScript 代码。对于 myArray 中的每个对象，都会创建一个链接，显示当前正在迭代的对象的值。但是，链接始终是我手动创建的 page2.html。

我希望 JavaScript 程序创建每个页面，而不是手动创建每个链接。我知道我可以通过使用 CSS 清除当前页面并添加新元素来做到这一点。但是，这意味着页面不会改变，只会改变页面的内容。

我希望 JavaScript 程序使用不同的路径为 myArray 中的每个对象动态创建一个页面。

我发现这个问题很相似，但关于如何使用 PHP 的页面来做到这一点： 从 Javascript 动态创建 HTML 页面

Answer 1

使用history.pushState函数。 例如：

history.pushState({page: "page1"}, "Page 1", "/page1");

这将动态创建一个网址为“/page1”的页面。 您可以使用诸如innerHTML之类的函数来创建HTML代码，并通过创建一个包含每个页面中应该不同的数据的对象数组来使每个页面变得动态。

然后您可以使用基本 URL 创建指向每个对象的链接。例如：

let cars = [
  {
    "color": "purple",
    "type": "minivan",
  },
  {
    "color": "red",
    "type": "station wagon",
  },
];

let baseURL = "www.mywebsite.com/";

for (let car of cars) {
  let color = car.color;
  let button = document.createElement("input");
  button.setAttribute("type", "submit");
  button.setAttribute("id", color);
  button.setAttribute("value", color);
  button.setAttribute("onclick", function() {
    window.location.href = baseURL + color;
  });
  document.body.appendChild(button);
}

在本地计算机上打开网页时，这不会更改地址。但是，当网页位于网络服务器上时，它会更改网址。