【发布时间】：2013-10-19 23:17:37
【问题描述】：
我觉得我错过了一些明显的东西，但我不能让 iframe 在 Firefox 中使用 Angular.js 路由。
index.html 文件包含加载 main.html 的 ng-view：
<div>
Main content here
<iframe src="#/child"></iframe>
</div>
iframe 指向/child 路由，$routeProvider 被配置为加载child.html 模板：
angular.module('testappApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when('/child', {
templateUrl: 'views/child.html'
})
.otherwise({
redirectTo: '/'
});
});
这适用于 Chrome 和 Safari，但不适用于 Firefox 和 IE 10（我认为早期版本的 IE 也无法使用）。感谢您的帮助，谢谢！
【问题讨论】：
-
你有特殊要求走这种方式（iframes）还是可以使用其他方式（即：ng-include）？
-
我需要使用 iframe，因为我需要在一页上有多个独立视图。每个视图都应该有自己的基于导航、历史记录等的面包屑，并能够通过永久链接在单独的页面上打开每个独立视图的每个状态。 iframe 似乎是最自然的选择。
-
问题更多是使用多个视图，而不是使用 iframe。请查看 AngularUI UI-Router: (github.com/angular-ui/ui-router#multiple--named-views)。它完全符合您的要求。
-
@jpmorin 我考虑过使用 ui-router，实际上我已经基于它构建了一个原型。不幸的是，它不符合我的要求，因为我需要嵌套 states 之类的东西，而不是嵌套视图。这样一个页面将包含 3 个独立状态，更改 1 不会影响其他 2。我不确定这是否可以通过 ui-router 实现。
-
我们的想法是让一个主要的 Angular 应用程序像您一样在其中运行您的 iframe。您可以通过设置范围变量而不是使用 $routeProvider 来动态更改 iframe 的
src属性。在每个 iframe 中，您需要创建一个新的 Angular 应用程序，其中包含运行所需的一切（重新加载脚本、css、图像等）。他们的 $routeProvider 将监听src属性，因为它是 iframe url。
标签： javascript firefox angularjs iframe routes