Как открывать все ссылки в новой вкладке с помощью JavaScript
Вы когда-нибудь пытались загрузить программное обеспечение со стороннего сайта? Когда вы нажимаете на кнопку загрузки, открывается множество вкладок с назойливой рекламой. Мне, как разработчику, интересно, как они программируют свой сайт для этого. Вы не поверите, это очень просто. В этом уроке я покажу вам, как открыть все ссылки в новых вкладках с помощью JavaScript.
Как открыть все ссылки сразу в виде новых вкладок
Подход для этого довольно прост. Нам просто нужно выбрать все HTML-теги якорей, содержащие ссылку, что легко сделать с помощью document.querySelectorAll, затем пройтись по ним с помощью цикла for или forEach и для каждой ссылки открыть новую вкладку, что легко сделать с помощью строки window.open(link.href, '_blank'), которая открывает новую вкладку с видовой ссылкой, присутствующей в атрибуте href тега якоря, а _blank указывает, что URL должен быть открыт в новой вкладке. Давайте реализуем это в реальном коде.
Пошаговое руководство по открытию всех ссылок в новых вкладках
Предположим, мы создаем веб-страницу для обзора технологий программирования и прикрепили ссылки в каждом разделе технологии. Теперь мы хотим открывать их все сразу в виде новых вкладок при нажатии на кнопку. Давайте быстро создадим такое приложение.
Шаг 1: Создайте папку проекта, откройте её в редакторе кода, создайте файл index.html и напишите в нём следующий код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programming Technologies Overview</title>
</head>
<body>
<div class="content">
<h1>What is Node.js?</h1>
<p>Node.js was developed by Ryan Dahl in 2009. It is a JavaScript runtime built upon the V8 engine that uses
Javascript for creating the server side. The server created using Node.js can interact with the operating
system and file system. For more details, visit the
<a href="https://nodejs.org/en/">official Node.js website</a>.</p>
</div>
<div class="content">
<h1>What is Express.js?</h1>
<p>Express.js is widely used in the Node.js ecosystem. It is used to build web applications and APIs. It is very
simple, flexible and easy to use. For more details, visit the <a href="https://expressjs.com/">official
Express.js website</a>.</p>
</div>
<div class="content">
<h1>What is EJS?</h1>
<p>EJS is the most popular template engine that allows you to generate HTML markup with pure JavaScript. It
allows embedded JavaScript templating making it perfect for Node.js applications. It can be used for
client-side as well as server-side rendering.
For more details, visit the <a href="https://ejs.co/">official EJS website</a>.</p>
</div>
<div class="content">
<h1>What is npm?</h1>
<p>NPM stands for Node Package Manager, used to install different Node.js packages. NPM is the core of Node.js,
it is an online repository of thousands of Node.js packages use for different functions. These packages are
free to install and can be used in the creation of different types of applications. For more details, visit
the <a href="https://www.npmjs.com/">official npm website</a>.</p>
</div>
<span class="reference-link">Click here to open all links in new tab JavaScript</span>
</body>
</html>Шаг 2: Используя тег <style>, добавим в наш HTML немного CSS.
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
background-color: #f9f9f9;
color: #333;
}
h1 {
color: #333;
font-size: 2em;
}
.content {
background: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.reference-link {
display: block;
margin-top: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-align: center;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
}
.reference-link:hover {
background-color: #0056b3;
}
</style>Шаг 3: Теперь используйте тег <script>, чтобы написать логику JavaScript для открытия всех ссылок в новых вкладках.
<script>
function openAllLinks() {
const links = document.querySelectorAll('.content a');
links.forEach(link => {
window.open(link.href, '_blank');
});
}
</script>Всё происходит так, как я объяснил в подходе. Мы создали функцию openAllLinks(), которая выбирает все теги якорей, присутствующие внутри класса content, зацикливает каждый из них и открывает их в новой вкладке с помощью метода window.open(), передавая в качестве аргумента атрибут href, содержащий ссылку, которую нужно открыть для каждого тега якоря, и '_blank', чтобы открыть каждый из них в новой вкладке. Вот и всё, наше кодирование завершено.
Шаг 4: Теперь, чтобы запустить эту функцию, привяжите ее к кнопке с классом reference-link с помощью события onclick.
<span class="reference-link" onclick="openAllLinks()">Click here to open all links in new tab JavaScript</span>
Шаг 5: Чтобы запустить приложение, откройте папку проекта в файловом проводнике и щелкните на файл index.html, чтобы открыть его в браузере.
Видите, каждая ссылка на нашей веб-странице открывается в новой вкладке, а не в новом окне.
Заключение
Чтобы открыть все ссылки в новой вкладке, нам нужно лишь добавить событие click и привязать window.open(link.href, '_blank') к каждой ссылке с помощью цикла, и всё!
