Outlook Web加載項中的iframe無法在Edge / IE中加載動態HTML內容

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中加載動態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