I'm having issues with IE again. I'm trying to display another page of my application in a modal dialog box using an iframe.
Works perfectly as intended with chrome and firefox. IE however, shows the iframe blank. If I inspect it with the developper tools, I see this.
<html>
<head></head>
<body></body>
</html>
If I change the iframe src element to bing.com for instance, it's working. I tried to set the position: relative, etc. it's not working. Here's the iframe tag:
<iframe height="710" id="trackingtableIframe" src="https://localhost:44300/#resources/1174/info?iframe=true" style="border: currentColor; border-image: none; width: 100%;"></iframe>
EDIT: Steps I've taken to resolve this and the result:
- Removed all dynamic generation of the Iframe, (Not Displaying)
- Installed the site certificate since its HTTPS, (Not Displaying)
- Changed the Iframe relative URL to a full URL, (Not Displaying)
- Changed the Iframe URL to any other site, (Displaying)
- Stripped all the content of my webpage, created a test.html web page with only the iframe tag in there pointing to the right page with the right URL (Displaying)
I have found this issue and how to resolve it.
The problem was that my web application is a Single Page Application using .NET MVC/Durandal/Breeze. Since it's a SPA, all the routing is done javascript and page URLs are setup after the hashtag prefix like this #/resources/info/1
This behavior causes all pages to have the same URL from the browser perspective. Since the IFrame URL and the current page URL were the same, IE was not loading it. Adding a new "virtual" route to the same index controller was how I solved this issue.