ui-router not working in iframe in IE11 & Firefox

[robinelvin]

Admittedly I'm not entirely sure this is caused by ui-router but I am suspecting due to the nature of the issue.

I have an Angular app manually bootstrapped on my page which works fine. I have defined just 1 state (for now) which has some parameters defined. e.g. /ng/chart/#/board/parent/1/

I have a click handler which opens a UI Bootstrap modal inside of which is an iframe with ng-src set to a scope variable.

This issue only affects IE11 and Firefox. In Chrome it works perfectly.

The issue is that if the ng-src variable is set to any URL on my site it loads fine apart from the single state URL where it does nothing. And I mean absolutely nothing as confirmed by looking at the network tab and the console. The iframe src attribute is set correctly. If I inspect this attribute and change it to some other url e.g. /testpage then the iframe loads that content. If I change it to /ng/chart/#/board/child/2/ it again does nothing and the old content is still displayed.

Now, I am making the assumption that because the browser is not even trying to load the page that somehow ui-router is intercepting the URL and doing nothing. I tried listening for $stateChangeStart but this never gets fired.

[samithaf]

Which version of ui-router you are using? You need to add stateEvents.js if you want to add listeners. I have an App running via in iFrame which used 0.2.X before and recently upgraded to 1.0.X. App works as usual (in general except very few issues in new version issue) .

[christopherthielen]

let me see if I understand...

1. You have a ui-router app at /ng/chart which has a single state with the url #/board/child/2/
2. You have an angular app (does this outer app also use ui-router?), that opens a modal.
3. That modal has an <iframe ng-src="some.scope.variable"></iframe>
4. When you the iframe src evaluates to src="/ng/chart#/board/child/2/", the iframe does not load /ng/chart from the server.
5. However, if you change so src="/testpage", it does load /testpage from the server.

When the modal opens, you expect:

1. The browser fetches /ng/chart
2. The page at /ng/chart loads angular.js and angular-ui-router.js and your application code
3. UI-Router parses the hash and activates the state for #/board/child/2/

However, step 1 is not happening

---

Is all that correct?

[robinelvin]

@christopherthielen Almost! I have a single ui-router app with a single state: /board/{type}/{id}/
The iframe opens the same app but with different params (Yes, this seems unnecessary but there are complicated reasons for this which I won't go into)

Now, I have just tried creating a clone URL in my server app routes (Django) so that I have /ng/chart and /ng2/chart and if I load /ng/chart in the main window and /ng2/chart in the iframe it works.

[tgwhite]

@robinelvin are you still having this issue? I'm having problems with an iframe that contains some navigation to anchors and it's not working with IE or firefox.

[robinelvin]

@tgwhite The fix I described above worked so I haven't touched the code since. I suspect what you are attempting is a different issue. If you are using anchors won't that clash with the route name?

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues
may be reopened.

Thank you for your contributions.