title: How to trigger 'beforeunload' event from within an IFRAME
body: <p>I have an application (name it B) which is being embbeded in an Iframe by another main application (Name it A or parent).</p>
  
  <pre><code>So: App A--                     // domain of A: https://mydomain/mainApp
             |___ App B in Iframe // domain in B: https://mydomain/appB
  </code></pre>
  
  <p><strong>Problem is</strong>: Then main/parent app has a navigation menu. One item, when clicked, creates an Iframe with SRC ATTRIBUTE loading App B inside.</p>
  
  <p>When the user clicks into another option of the menu in app A, the Iframe is destroyed and another content View in React appears, replacing the Iframe.</p>
  
  <p>When doing this, all data typed in forms by the user in B are gone, as I can not trigger a save event I have in B.</p>
  
  <p>I have added following event handler in the iframe app:</p>
  
  <pre><code>window.addEventListener("beforeunload", function (e) {
  
      // Trigger here the save settigns event inside B
  });
  </code></pre>
  
  <p>But former <strong>code is never triggering</strong> when user navigates through Main App menu. As I can see, navigating menu in App A, changes URL in the browser(but seems a SPA React.js routing or similar, no real redirection).</p>
  
  <p><strong>Question is</strong>: Can Iframe detect when is going to be unloaded/destroyed to trigger first the Saving Settings in Ajax ? P.S: I don't have access to App A code.</p>
  
  <p>Thanks in advance</p>