React技巧之设置target=_blank

chuckQu

发布于 2022-08-19 15:32:47

8010

发布于 2022-08-19 15:32:47

文章被收录于专栏：前端F2E

原文链接：https://bobbyhadz.com/blog/react-set-target-blank[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

设置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	一个用逗号分隔的窗口特征列表。在例子中用于增加安全性。