Блог

Главная - Вопросы по программированию - Как я могу создать уникальные URL-адреса для сайтов, созданных с помощью JS?

Как я могу создать уникальные URL-адреса для сайтов, созданных с помощью JS?

#javascript #arrays #url #foreach #template-literals

Вопрос:

У меня есть три кнопки. Я просматриваю кнопки с 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»
и т.д.? Потому что теперь, если открывается новый сайт, я вижу «о программе:пусто» в окне браузера. Заранее благодарю вас за вашу помощь.

Ответ №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');
Метки: ,