統一路由網址在iframe中呈現獨立頁面

我在angularjs上有幾個應用程序（單頁面應用程序，獨立）。他們有不同的UI風格。統一路由網址在iframe中呈現獨立頁面

我不得不創建新的應用程序（獨立），頁面左側的導航面板和頁面右側的iframe。

導航面板部分解決了UI造型統一問題。

Iframe將包含其他獨立的應用程序。

iframe是導航和iframe中需求量的

我創建了主要的應用程序，基於angularJs。

enter image description here

作爲結果，主應用程序加載獨立的模塊（SPA/AngularJs）通過iframe和這些模塊很好地工作。

但是，有一個「小」的問題。每個獨立模塊都有自己的angularjs路由。它工作，但不顯示在主窗口（在iframe所在的主應用程序中）

是否可以統一主應用程序窗口的路線和iframe路線的路線。

任何想法？

來源

2014-09-25 Kronos

好的我花了一點時間爲你提出一個工作解決方案。但是它預設了一定程度的一致性和對角度應用程序的控制。

步驟之一就是簡單的鏈接導航添加到我的子角applciation的部分：

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

});

來源

2014-10-18 13:56:18 XGreen

統一路由網址在iframe中呈現獨立頁面

回答

相關問題