title: How to listen to `message` of popup if its url changes?
body: <p>On url <code>http://localhost:9001/mypage</code> I have a popup with an auth url of some service. </p>
  
  <pre><code>const authUrl = 'http://someauthservice.com/someurl'
  
  const authPopup = window.open(authUrl, '');
  
  authPopup.addEventListener('message', (event: any) =&gt; {
          console.log(event);
      });
  </code></pre>
  
  <p>When user authenticates on that url, the popup is then redirected to my callback url <code>http://localhost/callbackurl</code>, which has a simple page on my side with code posting a window message:</p>
  
  <pre><code>window.postMessage('hey ho', 'http://localhost:9001/mypage');
  </code></pre>
  
  <p>In this flow event listener loses the event and doesn't run the callback:</p>
  
  <ol>
  <li>Open popup with <code>const authUrl = 'http://someauthservice.com/someurl'
  </code>.</li>
  <li>Click <code>auth</code> button.</li>
  <li>Redirect to my url.</li>
  </ol>
  
  <p>In this flow it works fine:</p>
  
  <ol>
  <li>Open popup with <code>const authUrl = 'http://localhost/callbackurl'</code>.</li>
  </ol>
  
  <p>So, if some url is loaded in the popup then my url is loaded, the event is not listened anymore, but if the url doesn't change, the event is listened and the callback is fired.</p>
  
  <p>How do I keep event listener when the url changes?</p>
  
  <p>Update: The idea is I want to allow users to authenticate on 3rd party service, then when it redirects to my url with some code, I understand that authentication was successful and thus I want my host application to run some logic, like update some variable from <code>Pending</code> to <code>Verified</code>.</p>