I have a parent application that embeds my Angular landing page inside an (iframe-div). This landing page displays icons for multiple apps. When a user clicks an icon, I want to: Replace the current iframe with a new app (by changing its URL). Show a loader until the new app finishes loading. But replacing url directly would destroy my code execution and I will not be able to show loader. The new app emits a postMessage like { MessageType: 'AngularAppLoaded' } once it's ready. Problem: Since my Angular app is running inside the iframe,if I open another iframe then wait for iframe to load and send message. This approach is working but now I have 3 iframes in my app, which is causing delays. Idea: Would this approach work better? From inside the iframe (i.e. my Angular app), create a new with the target app’s URL. Append it (initially hidden) to the parent DOM. Once the new iframe emits the expected postMessage, replace the current iframe (iframe-div) in the parent document with the new one. Show a loader in the meantime. Continue reading...
