统一 iframe 内呈现的独立页面的路由 URL

Posted 2023-03-05

【中文标题】统一 iframe 内呈现的独立页面的路由 URL

【英文标题】：Unify the routing Urls for independent pages rendered inside an iframe

【发布时间】：2014-11-19 23:14:08

【问题描述】：

我在 angularjs 上有几个应用程序（单页应用程序，独立）。 它们具有不同的 UI 样式。

我必须使用页面左侧的导航面板和页面右侧的 iframe 创建新应用程序（独立）。

导航面板部分解决了 UI 样式统一问题。

iframe 将包含其他独立的应用程序。

iframe 是要求

我基于 angularJs 创建了带有导航和 iframe 的主应用程序。

因此，主应用程序通过 iframe 加载独立模块（SPA/AngularJs）并且这些模块工作正常。

但是，有一个“小”问题。每个独立模块都有自己的 angularjs 路由。它可以工作，但不显示在主窗口中（在 iframe 所在的主应用程序中）

是否可以统一应用主窗口的路由和iframe路由的路由。

有什么想法吗？

【参考方案1】：

好的，我花了一点时间为您提出一个可行的解决方案。但是，它以一定程度的一致性和对角度应用程序的控制为前提。

第一步是简单地添加一个导航，其中包含指向我的子角度应用程序部分的链接：

<nav>
    <ul>
        <li><a href="#/app1/main">App1</a></li>
        <li><a href="#/app2/home">App2</a></li>
    </ul>
</nav>

在同一个父页面上，我还添加了一个 iframe，因为您需要 :)

<section>
    <iframe src=""></iframe>
</section>

用以下脚本来处理父窗口中的地址变化：

// Simple method to look for the second index of something
String.prototype.secondIndexOf = function (val) 
    var fst = this.indexOf(val);
    var snd = this.indexOf(val, fst + 1)
    return snd


// My goto method to basically go to somewhere in my angular apps
function goto(app, route) 
    $('iframe').attr('src', app + '/test.html#' + route)


// upon hash change of the parent page I will call my goto method if there is a hash
$(window).on('hashchange', function () 
    var hash = location.hash;

    if (hash) 
        var appName = hash.substring(hash.indexOf('app'), hash.indexOf('app') + 4);
        var route = hash.substring(hash.secondIndexOf('/'));
        goto(appName, route);
    

);

// On initial page load I also like to trigger this hash change to
// go to the right location initially
$(window).trigger('hashchange');

显然，这似乎是一种单向解决方案，除非我们还创建从子 Angular 应用程序到父窗口的反向 url 修改。

为了实现这一点，我决定将哈希更改推送回每个应用程序的 $routeChangeStart 事件内的父窗口：

例如，对于一个 app1，它将是：

.run(["$rootScope", function ($rootScope) 

    $rootScope.$on('$routeChangeStart', function(next, current) 

    if (current.$$route)
        window.parent.location.hash = "#/app1" + current.$$route.originalPath;
    

);