Angular JS : iframe not working in Firefox and IE

Question

I'm having an iframe in an uibmodal, to which I'm providing a static HTML path (in the same domain). The URL works correctly in Safari, Chrome and iOS Devices. However, it doesn't load in Firefox and IE11.

After doing some research I got to know that it's because of ui-router that it's not able to go to the relative URL which I'm providing. Here's a similar question which I came across (link) , however I don’t know how I should go about fixing it.

I’ve tried to parse the URL using $sce.trustAsResourceUrl(), and even by giving an absolute path e.g.. http://localhost:3000/#mySamplePage. It still loads in Chrome but fails to load on Firefox and IE11. Also the thing to note is that there aren’t any errors in the console.

I’m using angular ui-router version 0.2.18 and angular 1.5.

Please share your valuable inputs.

Thanks!

Answer 1

I had the same issue and was able to solve it (with help from Angular.js, iframes and Firefox). The iframe needs to know the default page in FF and IE. Ours is an mvc app hosting the angular app so the url for our iframe needed the default controller:

http://localhost:8000/mvc/Controller/#/mySamplePage