Question

我有一个Outlook Web加载项，该加载项需要在加载加载项时动态加载文件中的HTML文本（通过XHR请求），动态更改某些元素并将html填充到也正在创建的iFrame中动态地在加载项的主页主体内。在Chrome / Firefox中可以正常运行，但在Outlook桌面和Edge / IE上无法运行。修改后的HTML从不显示在iframe内-仅<HTML><BODY></BODY></HTML>。

我是否在外接程序主体中使用iframe遇到某种安全问题？还是我的DOM操作某种程度上与Edge / IE不兼容？我是否可以使用另一种方法来动态加载HTML，以替换可在所有平台上使用的外接程序主页？

请注意，我从中获取HTML的页面本质上是模板，但是不能包含任何脚本元素或引用Office JS。这就是为什么我将其主体动态加载到主页上的原因，该页面没有自己的UI，只有任务窗格的.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}`);
}

}

Answer 1

事实证明。完全无法呈现任何内容是由于对IE 11使用了不受支持的JavaScript。但是，一旦删除了该代码，将HTML放入iframe的源中时，IE 11仍然存在问题。通过仅处理外接程序源页面的DOM而不是动态更改HTML以便将其放入iframe即可解决该问题。

Outlook Web加载项中的iframe无法在Edge / IE

1 个答案: