Unify the routing Urls for independent pages rendered inside an iframe

Question

I have few apps(Single page application, independent) on angularjs. They have diferent UI styling.

I had to create new app ( independent ) with navigation panel in the left side of the page and iframe in the right side of the page.

Navigation panel partly solves UI styling unify problem.

Iframe will contain other independent apps.

Iframe is a requirment

I have created main app with navigation and iframe, based on angularJs.

As result, main app loads independent modules(SPA/AngularJs) by iframe and those modules work fine.

But, there is a "small" problem. Every independent module has own angularjs route. It works, but doesn't display in main window ( in main app where iframe is located )

Is it posible to unify route of main app window and route of iframe route.

Any ideas?

Answer 1

ok I spent a little time for you to propose a working solution. However it presupposes a certain level of consistency and control over your angular applications.

Step one was to simple add a navigation with links to section of my sub angular applciation:

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

On the same parent page I also added an iframe as you require :)

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

With the following scripts to handle the address changes in the parent window:

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

Obviously this seems to be a one way solution unless we also create backwards url modification from child angular applications back up to the parent window.

In order to achieve this I decided to push the hash changes back up to the parent window inside the $routeChangeStart event of each application:

so for example for an app1 it would be:

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

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

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

});