javascript – 统一iframe内部独立页面的路由URL

我有几个应用程序(单页应用程序,独立)on angularjs.
他们有不同的UI样式.

我不得不创建新的应用程序(独立)与导航面板在页面的左侧和iframe在页面的右侧.

导航面板部分解决了UI造型统一问题.

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

iframe是一个要求

我已经使用导航和iframe创建了基于angularJs的主应用程序.

因此,主应用程序通过iframe和这些模块正常工作来加载独立模块(SPA / AngularJ).

但是,有一个“小”的问题.每个独立模块都有自己的anglejs路由.它的工作原理,但不显示在主窗口中(在iframe所在的主应用程序中)

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

有任何想法吗？

解决方法

好的,我花了一点时间提出一个工作解决方案.然而,它预先假定您的角度应用程序具有一定程度的一致性和控制.

第一步是简单地添加导航,链接到我的子角度应用程序的部分：

<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');

显然,这似乎是一种单向解决方案,除非我们还从子角度应用程序中创建向后父窗口的向后url修改.

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

所以例如对于app1,它将是：

.run(["$rootScope",function ($rootScope) {
 
    $rootScope.$on('$routeChangeStart',function(next,current) {
 
    if (current.$$route){
        window.parent.location.hash = "#/app1" + current.$$route.originalPath;
    }
 
});

javascript – 统一iframe内部独立页面的路由URL

解决方法

猜你在找的JavaScript相关文章