React技巧之设置target=_blank

设置target=_blank

在React中将元素的target属性设置为_blank ,可以使用锚元素并设置rel属性。比如说,<a href="https://example.com" target="_blank" rel="noopener noreferrer"> 。_blank 值意味着资源在新的标签页被加载。

export default function App() {
  const openInNewTab = url => {
    // 👇️ setting target to _blank with window.open
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      {/* 👇️ setting target to _blank on a link */}
      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
        Example.com
      </a>

      <hr />

      <button onClick={() => openInNewTab('https://example.com')}>
        Example.com
      </button>
    </div>
  );
}

需要注意的是,当设置target属性为_blank时,需要将rel属性设置为noopener noreferrer 。

rel属性的noopener 关键字指示浏览器导航到目标资源,而不授予新的浏览上下文对打开它的文档的访问权。

a标签元素的target属性被设置为_blank时,资源在新的标签页被加载。

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

或者说,当使用window.open() 函数时,你可以将target属性设置为_blank

export default function App() {
  const openInNewTab = url => {
    // 👇️ setting target to _blank with window.open
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      <button onClick={() => openInNewTab('https://example.com')}>
        Example.com
      </button>
    </div>
  );
}

window对象上的open()方法加载指定的资源到新的或者已存在的标签页。

我们将以下3个参数传递给open()方法:

名称 描述
url 被加载的资源的url或者路径
target 资源被加载到的浏览器上下文的名称。_blank 属性值意味着资源在新的标签页被加载。
windowFeatures 一个用逗号分隔的窗口特征列表。在例子中用于增加安全性。

当用户点击button按钮时,我们为onClick属性传递的函数将被执行,并且指定页将会在新标签页加载。

总结

通过设置target属性为_blank,我们在新标签页中打开了资源。一共介绍了两种方式:一种是为a标签元素设置属性,另一种是为window.open()方法传入参数。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React技巧之设置target=_blank