I have three buttons. I loop through the buttons with foreach and each button will open a new site with different contents, which are stored in an array (I filter through the array and put the value of the content keys in a variable):
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>The question is, how could I generate a unique URL for each opened site such as "www.site-domain.com/site-1.php", "www.site-domain.com/site-2.php", "www.site-domain.com/site-3.php" etc? Because now if a new site is opened I can see "about:blank" in the browser window. Thank you in advance for your help.
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"
}
];
You can add url property as in example above with web-site address that you want, then you can add this property to window.open (first argument) following the example below:
var opened = window.open(site.url, '_blank');