javascript - Angular8 IFrame before beforeunload event - Stack Overflow

admin管理员组

文章数量:1410682

I have an angular application which is kind of the main application that hosts sub application inside it. The sub applications are also angular applications. The way that I load sub application is through Iframes.

The sub-applications are shown as a list and when I click on an tab, that application is loaded. When I am making some changes to the data in an application and if I click on another sub-tab, I wanted to show a warning message saying " changes will be lost". I am able to achieve it by using beforeunload event as below. I can check to see if there are any unsaved changes and show the warning popup.

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
      if (**my logic here) {
          $event.returnValue =true;
      }
  }

The only problem with this is, when I click the other sub-tab, the host application highlights that sub-tab and then the warning pop-up is shown. If I click on stay button on the popup, I am able to be on the sub-tab I want but on the host application the other sub-tab is highlighted. So I am trying to see a way to not highlight the other tab if I want to stay on the current sub-tab. Something before beforeunload.

I have an angular application which is kind of the main application that hosts sub application inside it. The sub applications are also angular applications. The way that I load sub application is through Iframes.

The sub-applications are shown as a list and when I click on an tab, that application is loaded. When I am making some changes to the data in an application and if I click on another sub-tab, I wanted to show a warning message saying " changes will be lost". I am able to achieve it by using beforeunload event as below. I can check to see if there are any unsaved changes and show the warning popup.

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
      if (**my logic here) {
          $event.returnValue =true;
      }
  }

The only problem with this is, when I click the other sub-tab, the host application highlights that sub-tab and then the warning pop-up is shown. If I click on stay button on the popup, I am able to be on the sub-tab I want but on the host application the other sub-tab is highlighted. So I am trying to see a way to not highlight the other tab if I want to stay on the current sub-tab. Something before beforeunload.

• javascript
• angular
• iframe
• onbeforeunload
• iframe-app

Share Follow edited Jun 2, 2020 at 17:11 indra257 asked Jun 2, 2020 at 16:10 indra257indra257 8655 gold badges2626 silver badges5353 bronze badges 3

• can you show a small stackblitz? – Aakash Garg Commented Jun 5, 2020 at 21:09
• @AakashGarg I can't show it in stackblitz as it involves three applications. Please let me know if you need more details. . – indra257 Commented Jun 5, 2020 at 21:41
• do you currently have a method by which you can tell child application which tab to open? – Aakash Garg Commented Jun 9, 2020 at 12:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

My understanding is you have to update an existing project that's been constructed in such a way that the beforeunload event is employed to achieve something similar to the Angular feature called route guards. You do or don't load the selected iframe depending on your logic implemented with the help of beforeunload event. You don't seem to favor changing this implementation that's why seeking a solution that covers your requirement applying a similar approach like another window event.

If my understanding is correct, you need to refactor this implementation so that the "guarding" happens depending on the inner workings of the "host application" where it actually has to be in the first place. The issue you have arises because by the time the iframe's unload event is canceled, host application's canceled tab gets already selected.

In short, this seems to be handled in your tab's selection event. My answer may or may not propose a solution you would accept, since we don't have all the details like which ponent suit you use, I can only present a pseudo solution:

Inside the ponent where your navigation tab's ui logic takes place:

onTabSelected(selectedIndex) {
    if (..your logic here) {
        loadIframe(selectedIndex);
        highlightTab(selectedIndex);
    }
}

There is no such event as before beforeUnload. Two applications i.e. host and child can municate via postMessage. so in beforeUnload event you can send a postMessage to child application to highlight existing tab. for eg:- let say you had reference of child window in variable name child1.

  child1.postMessage('{'tabId': 'tab1'}');

Your child application can receive this message and highlight the tab with identifier tab1.

Maybe we can create a munication system using the window.top object for example let's say that in the child apps you assign some id.

Then in the main app which hosts the others you create a subobject to window.top.appsMap = {};

Then from each child app you update a boolan value for example

window.top.appsMap['applicationId'] = hasChangesOrNot

Then from the top app where you change tabs you can check if the current opened tab app id has changes and not switch the tab but just try to unload the current iframe, it's not the best solution but if should work you can maybe also set some munication channel backwards which would trigger from the main app which hosts the others the save from the child app

In child app

const origin = this.getCurrentHostOrigin();
if (cancelSwitchTab) {
    window.parent.postMessage({}, origin); 
}

In host app:

this.renderer.listen(this.windowsRef.nativeWindow, 'message', event => {
  const message = event.data;
  *** your logic to revert highlight to current tab ***
});

本文标签： javascriptAngular8 IFrame before beforeunload eventStack Overflow