在新标签 iframe 角度和非角度应用程序中打开相同的 url答案

【问题标题】：Open the same url in new tab iframe angular and non angular app在新标签 iframe 角度和非角度应用程序中打开相同的 url
【发布时间】：2019-05-30 18:53:59
【问题描述】：

我对角度和前端技术非常陌生。我有一个非常大的现有应用程序。我们正在将其转换为角度。因此，我们将 Angular 作为主应用程序，并将旧应用程序加载到 iFrame 中。

当用户点击 www.xyz.com/dashboard 时，我的 Angular 应用程序运行此 URL 在我的浏览器中永远不会更改，并且旧的应用程序内容会加载到 iFrame 中。当用户从一个页面导航到另一个页面时，iFrame 源 URL 发生变化。

现在，当用户右键单击 iFrame 中的任何链接并单击以在新选项卡中打开时，应用程序页面会在新选项卡中打开，但它会加载旧网址，例如 www.xyz.com/oldApp/clicked/page/

我想要做的是，如果用户在 iFreame（旧应用程序）中打开任何链接，它应该在新选项卡中打开页面，但在浏览器中使用当前 URL（www.xyz.com/dashboard）。

【问题讨论】：

你能修改旧应用吗？
没有。这是一个非常大的应用程序。我们正在逐页转换为角度技术。但是我们可以修改旧的应用程序来工作。
您想在用户右键单击页面上的任何链接或任何位置时重定向您的仪表板页面？

标签： javascript angular iframe

【解决方案1】：

我得到了答案。它检查 URL 是否在 iframe 或父窗口中加载。如果它是父窗口，则将其重定向到角度 url。并且角度 URL 知道需要在框架中加载哪个页面，并且该页面是 lastVisitedPage

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();
}

}

【讨论】：