我有一个Outlook web插件,它需要在加载插件时从文件中动态加载HTML文本(通过XHR请求),动态更改一些元素,并将HTML填充到iFrame中,iFrame也在插件的主页体中动态创建。这在Chrome/Firefox中运行良好,但在Outlook桌面和Edge/IE上却失败了
<HTML><BODY></BODY></HTML>
.
请注意,我从中获取HTML的页面本质上是模板,但不能包含任何脚本元素或引用Office JS。这就是为什么我要将他们的主体动态加载到主页面中,主页面没有自己的UI,只有我的任务窗格的.js和officejs引用(以及包含添加到其中的iframe的div标记)。
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}`);
}
}
