使用reactjs在按钮单击时关闭当前浏览器选项卡答案

【问题标题】：Close current browser tab on button click, using reactjs使用reactjs在按钮单击时关闭当前浏览器选项卡
【发布时间】：2019-07-26 13:39:03
【问题描述】：

有没有一种方法可以使用 reactjs 按下按钮关闭当前浏览器选项卡？我已经尝试过window.close() 和self.close()，但似乎没有一个 JavaScript 方法有效。我不希望 React 中出现关闭窗口的事件。我想关闭浏览器选项卡本身。 window.close() 只能在使用window.open() 时使用。

【问题讨论】：

@MohammadMalek 当用户明确关闭浏览器选项卡时，将调用此事件。如果我理解正确。但我想通过单击按钮关闭浏览器选项卡。
出于安全原因，您只能关闭从代码中打开的标签页，这就是您粘贴的错误消息告诉您的内容

标签： javascript html reactjs

【解决方案1】：

浏览器不允许window.open()关闭非自开标签页所以这是一种解决方法并说服浏览器它是由你打开的

通过在同一页面中打开一个空白页面然后将其关闭。

你可以试试

window.open("about:blank", "_self");
window.close();

【讨论】：

是的...我认为解决方案必须是您提到的一种技巧，但我不知道打开浏览器窗口的确切代码，该浏览器窗口引用了已经间接打开的同一个窗口通过 React 或其他文件。我会试试这个。
这正是上面写的：在同一页面中打开一个空白页面，然后关闭该页面。唯一的缺点是空白页面保持打开状态（在 Chrome 95 上测试）。

【解决方案2】：

您现在只能关闭由window.open() 生成的这些选项卡。

【讨论】：

【解决方案3】：

最后的答案是不打开标签，你不能使用window.close()来关闭它。我到处搜索，所以，我想出了一个窍门。如果您使用的是 reactjs 钩子，只需像这样使用 useEffect 在同一选项卡中打开相同的 url-

useEffect(() => {
window.open("https://xyz.abc/", "_self", "");
console.log("open window");
}, []);

然后制作close函数，在close()中添加onclick，其中有window.close();

这肯定行得通！久经考验。

【讨论】：

这不是循环吗？
useEffect 将导致 window.open 无限期地运行，因为 useEffect，即使每次加载窗口时都会调用 [] 依赖项，不是吗？这就是我现在用你的例子所经历的
你能在 codepen 或任何在线 ide 上分享吗？
我很明显这是一个循环codesandbox.io/s/sad-bhaskara-pikd2?file=/src/App.js
试试这个，codesandbox.io/s/hopeful-thompson-x90rq?file=/src/App.js 但在本地，因为它不会在沙箱上关闭，所以，当你运行 npm start，然后点击按钮时，它会关闭。