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

Question

我有三个按钮。我用 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-域.com/site-2.php", "www.site-域.com/site-3.php" ETC？因为现在如果打开一个新站点，我可以在浏览器中看到“about:blank”window。预先感谢您的帮助。

Answer 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');

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

How can I create unique URL-s for sites generated from JS?

javascript

arrays

url

foreach

template-literals