在新标签页中打开链接后，与上一个标签页/窗口进行交互

Question

当用户提交表单时，我有一个微调器显示在页面上。 如果用户将表单提交到新标签页（在Chrome中按住Ctrl键并单击），则原始标签页中的微调框永远都不会消失。 一旦新标签页完成加载后，如何报告原始标签页，以便微调框将消失在该原始标签页中，并且用户可以再次与该页面进行交互？

我尝试研究文章，并发现其中的一条内容是阻止用户在新标签页中打开，但是，我不想阻止他们这样做。 我希望他们能够在新标签页中打开。

<form action="/Reports/Page1" id="reportForm" method="post">
...
<button class="btn rpcs-btn-primary" type="submit" formaction="/Reports/Page2">View Report</button>
</form>

我希望用户能够在新窗口/选项卡中查看报告，并且一旦加载，请从原始窗口/选项卡中移除微调器。

Answer 1

据我所知，浏览器中的不同选项卡不会直接共享内存，因此您无法直接访问变量。 您必须编写某种解决方法。

我根本不认为这是一种好的做法，但可能会解决问题的一种可能性是将值写入本地存储（同一域中的任何选项卡都可以访问）并在循环内定期读取它。

就像这样：

提交表格后，您可以

localStorage.setItem("form_submitted", "true");

当按钮上触发“点击”时

let myInterval = setInterval(function(){
  if(localStorage.getItem("form_submitted") === "true") {
    // REMOVE SPINNER HERE
    clearInterval(myVar);
  }
}, 1000);

这样，您可以在两个选项卡之间共享一些上下文。 不过，我的观点是， 您确实应该阻止用户打开新标签页 ，因此您将能够使用基于事件的简单逻辑，而不必忙于等待。

请注意，本地存储仅接受字符串，并且在JavaScript中任何非空字符串都被解析为true，这就是为什么我要明确验证该值是否等于“ true”的原因。