Как открыть ссылку в новой вкладке — объяснение HTML target blank

В этой статье мы рассмотрим, как использовать атрибут target="_blank" на примерах кода, и рассмотрим случае, когда вам следует рассмотреть возможность использования этого атрибута.

Как открыть новую вкладку браузера с помощью target="_blank"?

Атрибут target="_blank" используется внутри открывающего тега <a> следующим образом:

<a href="website-link-goes-here" target="_blank">

Когда пользователь нажимает на ссылку, на этой странице автоматически открывается новая вкладка браузера. Если не добавлять атрибут target="_blank" то поведение по умолчанию заключалось бы в том, что ссылка открылась бы в текущей вкладке браузера.

Что такое ключевое слово noopener?

Ключевое слово noopener в атрибуте rel используется в основном из соображений безопасности, чтобы злоумышленники не могли совершать манипуляции с исходной веб-страницей через свойство Window.opener. Если злоумышленник получит доступ к вашему объекту window, он может перенаправить вашу страницу на вредоносный URL-адрес. Вы можете использовать ключевое слово noopener, чтобы предотвратить возникновение этой проблемы безопасности. Вот как используется ключевое слово noopener:

<a target="_blank" rel="noopener" href="https://example.com">Example</a>

Обновления ключевого слова noopener

В 2021 году было сделано обновление, в котором современные браузеры теперь неявно устанавливают rel=noopener на любую ссылку с атрибутом target=_blank. Как вы можете видеть в этой таблице Can I use, ключевое слово noopener поддерживается большинством браузеров, кроме Internet Explorer 11. Даже с этим обновлением многие разработчики по-прежнему используют rel=noopener для ссылок, использующих атрибут target=_blank.

Стоит ли постоянно использовать атрибут target="_blank"?

Когда пользователи нажимают на ссылку, поведение по умолчанию заключается в том, чтобы эта ссылка открывалась на текущей странице, на которой они находятся, не открывая новую вкладку браузера. Вы должны хорошо подумать о том, в каких случаях использование атрибута target="_blank" будет подходящим. Хорошим примером может быть ситуация, когда пользователь работает над страницей и не хочет покидать эту страницу, если нажмет на ссылку.

Итоги

Вы можете использовать target="_blank" если хотите, чтобы ваши пользователи нажимали на ссылку, открывающую новую вкладку браузера. Атрибут target="_blank" используется внутри открывающего тега <a> следующим образом.

<a href="website-link-goes-here" target="_blank">

Ключевое слово noopener в атрибуте rel добавляется, чтобы злоумышленники не могли работать с исходной веб-страницей через свойство Window.opener.

React без JSX

Давайте напишем React код без использования JSX, чтобы мы могли лучше знать, почему мы используем JSX в React.

let h1 = React.createElement('h1',{style:{color:"green"}}," h1 element");
let p = React.createElement('p',{style:{color:"red"}},"p element");
let div = React.createElement('div',{className:"container"},h1,p);

ReactDOM.render(div,document.querySelector('#app'))

React.createElement(type,props,children) принимает три аргумента. type: Это означает тип HTML-элемента, который нам нужен. (Пример: h1, h2, p, div и т.д.) props: Любые пропсы, необходимые для этого элемента. children: Данные, которые нам нужно добавить внутрь элемента html (пример: обычный текст или дочерние элементы)

React с JSX

Теперь заменим приведенный выше код на код с JSX.

let  green = {color:"green"};
let red = {color:"red"};

let h1 = <h1 style ={green}>h1 element</h1>;
let p = <p style={red}>p element</p>;
let div = <div className="container">{h1}{p}</div>

ReactDOM.render(div,document.querySelector('#app'))

JSX, который мы пишем внутри React, часто преобразуется в JavaScript с помощью транспилятора babel.

Что такое JSX?

JSX позволяет нам писать HTML-синтаксис внутри JavaScript. Используя JSX, мы можем сделать наш код более читабельным. JSX используется не только в React, но и в некоторых других фреймворках.

Выражения в JSX

В JSX мы можем встраивать выражения JavaScript, обернув фигурными скобками { }.

let h1 = <h1> Odd number {2+3}</h1>

let users = ['user1', 'user2', 'user3']

let ul = (
  <ul>
    {users.map((user,i)=>(
      <li>{user}</li>
    ))}
  </ul>
)

В приведенном выше коде мы использовали метод map для перебора массива и создали три элемента li.

Атрибуты в JSX

Встроенные (инлайновые) стили

// объект
let greenColor = {color: "green"}

let h1 = <h1 style={greenColor}>This is heading</h1>

Для встроенного стиля нам нужно передать свойства стиля как объект внутри фигурных скобок, так как объект является выражением JavaScript. Мы также можем передать объект стиля непосредственно в фигурные скобки вместо использования дополнительной переменной.

let h1 = <h1 style={{color:"green"}}>This is heading</h1>

Внешние стили, использующие classNames

Нам нужно использовать className вместо обычного атрибута class, который мы используем в HTML, потому что внутри JavaScript уже присутствует ключевое слово class.

let h1 = <h1 className="header-h1">This is heading</h1>

Компоненты React

Компонент представляет собой многократно используемый фрагмент кода в React, который возвращает React элемент.

function Button(props){
    return <button>{props.name}</button>
}

Условные выражения в JSX

function ShowHide(props) {
  if(props.show) {
    return <button>Show</button>
  } else {
    return <button>Hide</button>
  }
}

ReactDOM.render(<ShowHide show="true" />,document.querySelector('#app'))

Мы можем упростить приведенный выше код, используя тернарный оператор.

function ShowHide(props){
  return <button>{props.show ? "Show" : "Hide"}</button>
}

Оператор spread в JSX

Предположим, нам нужно передать данные компоненту User с помощью пропсов.

function User(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <ul>
        <li>{props.email}</li>
        <li>{props.mobile }</li>
      </ul>
    </div>
  )
}

<User name="John" email="user@example.com" mobile={11233} />

Передадим те же пропсы с помощью оператора spread.

let user = {
  name: "John",
  email: "user@example.com",
  mobile: 11233
}

<User {...user} />