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:
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.
System.Web.Routing.RouteTable.Routes.MapRoute(
name: "Iframe",
url: "Iframe/{controller}/{action}/{id}",
defaults: new
{
controller = "HotTowel",
action = "Index",
id = UrlParameter.Optional
}
);