Open the same url in new tab iframe angular and non angular app

Question

I am very new to the angular and front end technologies. I have an existing application which is very big. We are transforming it into the angular. So we made our angular as a main app and load the old app inside the iFrame.

My angular app run when user hits www.xyz.com/dashboard This URL never changes in my browser, and old app content gets loaded inside the iFrame. When user navigates from one page to other page iFrame source URL changes.

Now When user right click on any of the link within the iFrame and click to open in new tab, application page open in new tab, but it loads the old url like www.xyz.com/oldApp/clicked/page/

What I want to do is if user opens any link within iFreame(old app) it should open the page in new tab but with the current URL(www.xyz.com/dashboard) in browser.

Answer 1

I got the answer. It checks the URL is loading inside the iframe or parent window. If it is a parent window then redirects it to angular url. And angular URL know which page needs to be loaded in frame and this page is lastVistitedPage

var iFrameDetection = (window === window.parent) ? false : true;
if(!iFrameDetection) {
    setCookie("lastVistitedPage", location, "3");
    var newUrl = window.location.origin;
    newUrl = newUrl.replace("8080", "4200");
    window.location.href = newUrl + "/dashboard";
}else {
    $(window).on( 'hashchange', function( e ) {
        postMessageForDocTitle();
    });
    postMessageForDocTitle();
}

}