Outlook Web加载项中的iframe无法在Edge / IE中加载动态HTML内容

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. 我有一个Outlook Web加载项，需要在加载加载项时动态加载文件中的HTML文本（通过XHR请求），动态更改某些元素并将html填充到也在内部动态创建的iFrame中加载项的主页正文。 This works fine in Chrome/Firefox, but is failing on Outlook desktop and Edge/IE. 在Chrome / Firefox中可以正常运行，但在Outlook桌面和Edge / IE上无法运行。 The modified HTML never shows up inside the iframe - just <HTML><BODY></BODY></HTML> . 修改后的HTML不会显示在iframe中-只是<HTML><BODY></BODY></HTML> 。

Am I running into some kind of security issue using an iframe in the add-in's body? 我是否在外接程序主体中使用iframe遇到某种安全问题？ Or is my DOM manipulation somehow not compatible with Edge/IE? 还是我的DOM操作某种程度上与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? 我是否可以使用另一种方法来动态加载HTML，以替换可在所有平台上使用的外接程序主页？

Note that the pages I'm getting the HTML from are essentially templates, but cannot contain any script elements or reference Office JS. 请注意，我从中获取HTML的页面本质上是模板，但是不能包含任何脚本元素或引用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). 这就是为什么我将其主体动态加载到主页上的原因，该页面没有自己的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

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

Outlook Web加载项中的iframe无法在Edge / IE中加载动态HTML内容

问题描述

1 个解决方案

解决方案1
0 2019-07-07 16:42:21

Outlook Web加载项中的iframe无法在Edge / IE中加载动态HTML内容

问题描述

1 个解决方案

解决方案1 0 2019-07-07 16:42:21

解决方案1
0 2019-07-07 16:42:21