Rendering a single SharePoint page in IE using Edge mode
Update 3/30/2020: I added one additional check when redirecting out of the child iframe to ensure the parent iframe is ie.aspx. This prevents issues when launching other pages that also load child iframes, such as the file upload dialog (Upload.aspx) in a document library.
I recently ran into an issue supporting an old SharePoint 2013 farm where a user had embedded a third-party GIS tool’s dashboard on a web part page using a Page Viewer web part. Unfortunately, the dashboard would not load properly in an iframe when IE’s document mode was set to version 10 (as it is by default in seattle.master):
Fortunately, the dashboard would load just fine when IE’s document mode was set to Edge instead:
Problem solved, right? Not so fast…turns out making this change site-wide via the master page breaks important functionality like Open with Explorer!
I needed to find a way to set IE’s document mode to Edge, but just on that one page. Thankfully, Paul Tavares developed this outstanding workaround, which also works great when you don’t have access to make changes to the master page. His post explains in depth how this works, but in short it loads the offending page in a full-screen iframe from a parent page (ie.aspx) that sets the document mode to IE=Edge. Since IE obeys the first X-UA-Compatible meta tag it encounters, it will render the SharePoint page in IE=Edge document mode, even though the master page is still set to IE=10.
I added a Script Editor web part to the dashboard page to detect IE and redirect the user to the special ie.aspx page accordingly:
// Detect Internet Explorer and redirect to ie.aspx if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1) { window.location.href = 'ie.aspx?/path/to/dashboardPage.aspx'; }
So this fixed the issue of the dashboard not loading for IE users, but a new problem emerged. As users would navigate around from the dashboard page, all navigation would occur within the child iframe. This meant that:
- The IE address bar did not update as navigation occurred.
- Open with Explorer was broken again since the browser was now rendering all pages in IE=Edge mode.
In order to address this, I had to add some JavaScript to the master page to detect if the page is being loaded in an iframe. If it is, and it isn’t the page I need to load in an iframe, I redirect out of the iframe:
// Detect Internet Explorer if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1) { // If page is being loaded in an iframe from ie.aspx, redirect out of it if (window.location.href != window.parent.location.href && window.location.href.indexOf('/ie.aspx') > -1 && window.location.href.indexOf('dashboardPage.aspx') == -1) { window.parent.location.href = window.location.href; } }
I’m not thrilled with this solution, but it gets the job done. I would welcome any feedback or suggestions for improvement for people still stuck supporting old versions of SharePoint!