4

I have a feeling I'm missing something obvious with this, but I can't make iframes to work in Firefox with Angular.js routes.

Here is a sample plunker code

The index.html file contains ng-view which loads main.html:

<div>
Main content here
<iframe src="#/child"></iframe>
</div>

The iframe points to the /child route, for which $routeProvider is configured to load child.html template:

angular.module('testappApp', [])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html'
      })
      .when('/child', {
        templateUrl: 'views/child.html'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

This works in Chrome and Safari, but not in Firefox and IE 10 (I assume earlier versions of IE won't work either). I appreciate any help, thanks!

Andre
  • 264
  • 3
  • 8
  • Do you have a special requirement to go this way (iframes) or can you use other ways (ie: ng-include)? – jpmorin Oct 11 '13 at 19:29
  • I need to use iframes, because I need to have multiple independent views on 1 page. Each view should have its own breadcrumbs based navigation, history etc, with the ability to open every state of each independent view on a separate page via permalink. Iframes seem to be the most natural choice for this. – Andre Oct 11 '13 at 19:52
  • The problem is more to work with multiple views, than to work with iframes. Please have a look at AngularUI UI-Router: (https://github.com/angular-ui/ui-router#multiple--named-views). It does exactly what you want to achieve. – jpmorin Oct 11 '13 at 19:58
  • @jpmorin I've considered using ui-router and I've actually built a prototype based on it. Unfortunately, it doesn't fit my requirements, because I need something like nested **states** rather than nested views. So that a single page would contain 3 independent states, and changing 1 would not affect the other 2. I'm not sure this is possible to achieve with ui-router. – Andre Oct 11 '13 at 20:05
  • Have a look at this SO anwser: http://stackoverflow.com/questions/16725811/multiple-angularjs-applications-driving-portlets And the plunker: http://plnkr.co/edit/sPoK3I?p=preview – jpmorin Oct 11 '13 at 22:01
  • 1
    The idea is to have a main angular app running with your iframes in it like you did. You dynamically change the `src` attribute of the iframes by setting a scope variable instead of using the $routeProvider. In each iframes, you need to create a new angular app with everything it needs to run (reload the scripts, css, images, etc...). Their $routeProvider will listen to the `src` attribute since it's the iframe url. – jpmorin Oct 11 '13 at 22:05
  • Did you finally make it work? I'm curious to know the solution. – jpmorin Oct 14 '13 at 19:06
  • @jpmorin no not yet. I will try the way you offered as a last resort - I would much prefer not to make 3 apps instead of 1. I decided to focus on other parts of the application for now and get back to this later, since I spent too much time on it and I need to move forward at this point. I'm really curious why iframe source with angular routes does not work in FF thou. Couple ideas I want to try out is overwriting window with contentWindow before bootstrapping angular, and playing with some iframe attributes (like, forcing cross-origin restrictions). I will post an update once I find out more. – Andre Oct 14 '13 at 20:57

1 Answers1

5

@jpmorin so, I just found a workaround, which is kind of inspired by your previous suggestion. So, after I changed the iframe source from #/child to index.html/#/child, everything works! No need for multiple includes of angular etc. I don't fully understand why the original route fails in FF, but pointing directly to the file that bootstraps the app and then adding the route works.

Andre
  • 264
  • 3
  • 8