iframe in Outlook web add-in fails to load dynamic HTML content in Edge/IE
Question
I have an Outlook web add-in that needs to dynamically load HTML text from a file (via an XHR request) as the add-in loads, dynamically alter some elements and stuff the html into an iFrame that is also being created dynamically within the add-in's main page body. This works fine in Chrome/Firefox, but is failing on Outlook desktop and Edge/IE. The modified HTML never shows up inside the iframe - just <HTML><BODY></BODY></HTML> .
Am I running into some kind of security issue using an iframe in the add-in's body? Or is my DOM manipulation somehow not compatible with Edge/IE? Is there another approach I can use to dynamically load HTML to replace the add-in's main page that will work on all platforms?
Note that the pages I'm getting the HTML from are essentially templates, but cannot contain any script elements or reference Office JS. That's why I'm loading their bodies dynamically into the main page, which doesn't have a UI of its own and just has my task pane's .js and Office JS references (and the div tag to contain the iframe that's added to it).
function initializePage(html) {
try {
//Create an iframe within the existing DIV in the add-in's home page, and set it's html to the passed parameter obtained from another file
let frame;
let frameNode;
let frameContainer = document.getElementById('iFrameContainer');
frameNode = document.createElement('iframe');
frameNode.id = 'myFrame';
frameNode.src = 'about:blank';
frameNode.height = '500px';
frameNode.className = 'my-iFrame';
frameContainer.appendChild(frameNode);
frame = document.getElementById("myFrame");
frameNode.onload = iframeLoad; //Must do DOM manipulation after this event triggers
frame.srcdoc = html;
} catch (err) {
console.error(`initializePage(): ${err}`);
}
}
function iframeLoad() {
try {
//Start manipulating the DOM in the iframe
let frameContainer = document.getElementById('myFrame');
let iFrameDoc = frameContainer.contentWindow.document;
//BUG Page is empty at this point in IE/Edge! e.g. iFrameDoc.childNodes[0].innerHTML should have all elements
let testButton = iFrameDoc.getElementById('myButton');
} catch (err) {
console.error(`iframeLoad(): ${err}`);
}
}
1 answers
solution1
0 2019-07-07 16:42:21
As it turns out. the complete failure to render anything was due to usage of unsupported JavaScript for IE 11. However, once that code was removed there were still issues for IE 11 when putting HTML into the source of the iframe. The problem was resolved by just manipulating the DOM of the add-in's source page rather than dynamically altering HTML to put in an iframe.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.