如何为从 JS 生成的站点创建唯一的 URL-s？答案

【问题标题】：How can I create unique URL-s for sites generated from JS?如何为从 JS 生成的站点创建唯一的 URL-s？
【发布时间】：2021-09-09 09:43:05
【问题描述】：

我有三个按钮。我用 foreach 遍历按钮，每个按钮将打开一个具有不同内容的新站点，这些内容存储在一个数组中（我过滤数组并将内容键的值放在一个变量中）：

let sites = [{
    "id": 1,
    "content": "Lorem ipsum 1"
  },
  {
    "id": 2,
    "content": "Lorem ipsum 2"
  },
  {
    "id": 3,
    "content": "Lorem ipsum 3"
  }
];

let siteLinks = document.querySelectorAll(".site-link");

siteLinks.forEach((el) => {
  el.addEventListener("click", () => {

    sites.filter((site) => {
      if (el.innerText == site.id) {
        var opened = window.open("", '_blank');
        opened.document.write(`
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project site</title>
    <link rel="stylesheet" href="css/styles.css">

</head>

<body>

<div class="content">
  ${site.content}
</div>

</body>

</html>`)
      }
    });
  });
});

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate sites from JS</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>

  <body>
    <div class="btn-container">
      <button class="site-link">1</button>
      <button class="site-link">2</button>
      <button class="site-link">3</button>
    </div>
  </body>
</html>

问题是，如何为每个打开的站点生成一个唯一的 URL，例如“www.site-domain.com/site-1.php”、“www.site-domain.com/site-2.php” ", "www.site-domain.com/site-3.php" ETC？因为现在如果打开一个新站点，我可以在浏览器窗口中看到“about:blank”。提前感谢您的帮助。

【问题讨论】：

标签： javascript arrays url foreach template-literals

【解决方案1】：

let sites = [{
    "id": 1,
    "content": "Lorem ipsum 1",
    "url": "http://example-1.com"
  },
  {
    "id": 2,
    "content": "Lorem ipsum 2",
    "url": "http://example-2.com"
  },
  {
    "id": 3,
    "content": "Lorem ipsum 3",
    "url": "http://example-3.com"
  }
];

您可以像上面的示例一样添加 url 属性以及您想要的网站地址，然后您可以按照以下示例将此属性添加到 window.open（第一个参数）：

var opened = window.open(site.url, '_blank');

【讨论】：