打开新选项卡会重新加载第一个选项卡

Question

在我的

.tsx

文件中我有这个功能：

  const openTabImage = (url: string) => {
    const newWindow = window.open();
    if (!newWindow) {
        console.error("Failed to open a new tab.");
        return;
    }
    newWindow.opener = null;
    newWindow.document.body.innerHTML = 'Loading...';  // Placeholder content while loading
    newWindow.document.body.innerHTML = `<img src="${url}" alt="Document Image"/>`;
  };

点击按钮时调用：

<Button
    title="Afficher l’original"
    onClick={() => openTabImage(imageSrcUrl)}
>
    Afficher l’original
</Button>

该函数会在新选项卡上打开图像（如预期）。

原始选项卡已加载并显示图像，并调用一些API从图像中提取和打印信息。

但是，当打开新选项卡时，原始选项卡会重新加载，并且我会丢失上下文。

如何避免重新加载原始选项卡？

Answer 1

我正在考虑该按钮位于表单内，这可能会导致由于发布表单而导致一些重新加载。在这种情况下，您可以尝试 PreventDefault。

你的按钮

<Button
 title="Afficher l’original"
 onClick={(e) => openTabImage(e ,imageSrcUrl)}
>
 Afficher l’original
</Button>

然后是你的js

const openTabImage = (event: any, url: string) => {
 event.preventDefault();
 const newWindow = window.open();
 if (!newWindow) {
  console.error("Failed to open a new tab.");
  return;
 }
 newWindow.opener = null;
 newWindow.document.body.innerHTML = 'Loading...';  // Placeholder content while loading
 newWindow.document.body.innerHTML = `<img src="${url}" alt="Document Image"/>`;
};