У меня есть веб-надстройка Outlook, которая должна динамически загружать текст HTML из файла (через запрос XHR) при загрузке надстройки, динамически изменять некоторые элементы и вставлять HTML-код в создаваемый iFrame. динамически в теле главной страницы надстройки. Это прекрасно работает в Chrome / Firefox, но не работает на рабочем столе Outlook и Edge / IE. Модифицированный HTML никогда не появляется внутри iframe - просто <HTML><BODY></BODY></HTML>.
Я сталкиваюсь с какой-то проблемой безопасности, используя iframe в теле надстройки? Или мои манипуляции с DOM как-то не совместимы с Edge / IE? Есть ли другой подход, который я могу использовать для динамической загрузки HTML, чтобы заменить главную страницу надстройки, которая будет работать на всех платформах?
Обратите внимание, что страницы, с которых я получаю HTML, по сути являются шаблонами, но не могут содержать никаких элементов сценария или ссылки на Office JS. Вот почему я загружаю их тела динамически на главную страницу, которая не имеет собственного пользовательского интерфейса и имеет только ссылки .js и Office JS на панели задач (и тег div, который содержит добавленный к нему iframe) .
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}`);
}
}