Как открыть ссылку в новой вкладке — объяснение HTML target blank
год назад·1 мин. на чтение
При разработке веб-сайта хочется, чтобы пользователь щелкнув ссылку, открыл ее в новой вкладке браузера. Но как это сделать в HTML?
В этой статье мы рассмотрим, как использовать атрибут Как открыть новую вкладку браузера с помощью
Атрибут
Что такое ключевое слово
Ключевое слово
Обновления ключевого слова
В 2021 году было сделано обновление, в котором современные браузеры теперь неявно устанавливают
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
.Что такое JSX в React
год назад·2 мин. на чтение
Новички в React, вероятно, путаются в том, почему мы пишем HTML внутри JavaScript.
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.JSX, который мы пишем внутри React, часто преобразуется в JavaScript с помощью транспилятора babel.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?
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
Встроенные (инлайновые) стили
Для встроенного стиля нам нужно передать свойства стиля как объект внутри фигурных скобок, так как объект является выражением JavaScript. Мы также можем передать объект стиля непосредственно в фигурные скобки вместо использования дополнительной переменной.// объект let greenColor = {color: "green"} let h1 = <h1 style={greenColor}>This is heading</h1>
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
с помощью пропсов.
Передадим те же пропсы с помощью оператора spread.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} />
let user = { name: "John", email: "user@example.com", mobile: 11233 } <User {...user} />