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

Question

I have a spinner that shows on a page when a user submits a form. If a user submits the form to a new tab though (control + click in Chrome) then the spinner in the original tab never goes away. How do I report back to the original tab once the new tab has completed loading so that the spinner will go away in that original tab and the user can interact with the page again?

I've tried researching articles and found one that says to prevent the user from opening in a new tab, however, I don't want to prevent them from doing that. I want them to be able to open in a new tab.

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

I expect the user to be able to view the report in a new window/tab and once it loads, remove the spinner from the original window/tab.

Answer 1

For as far as I'm aware different tabs in a browser don't share memory directly, so you can't access variables directly. You'd have to write some kind of workaround.

A possibility, which I don't consider a good practice at all but would likely do the trick, would be to write a value to local storage (which any tab in the same domain can access) and read it periodically inside of a loop.

It would be something like:

When the form is submitted you do

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

And when "on click" is triggered in the button

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

That way you can share some context between two tabs. My opinion though is that you really should prevent your user from opening a new tab , so you would be able to use simple event-based logic instead of busy waiting.

Note that local storage only accepts strings and any non-empty string is parsed to true in JavaScript, that's why I'm explicitly verifying if the value is equal to "true".