帶有JavaScript腳本的IE 11 window.open（）加載競爭條件問題

Question

目標：

我有一個名為“ ImageGallery”的ReactJs Web應用程序，當前已集成到我們的業務套件系統中（這是一個包含舊技術（主要是Web表單）的龐大系統）。 在我們的系統中，我們需要添加一個按鈕以啟動瀏覽器窗口來旋轉應用程序。

ImageGallery應用程序依靠當前系統將數據傳遞給它以顯示，這意味着，當ImageGallery應用程序加載時，它會在業務套件系統端調用一個函數，例如

window.parent.loadData()

由於數據是通過JavaScript傳遞的，因此沒有ajax調用。

碼：

function showImage() {
    var imageGalleryWindow = window.open('/ImageGallery', '_blank', 'height=' + window.screen.availHeight + ',width=' + window.screen.availWidth + ',scrollbars=yes,menubar=no,resizable=yes,toolbar=no,location=no,status=no');
    imageGalleryWindow.loadData= loadData;
}

loadData()函數在當前的JavaScript文件上可用，並將被傳遞到新窗口，以便ReactJS應用程序可以使用它。

問題：

該應用程序可與Chrome / Firefox / Edge完美配合，但不適用於IE11。有時會加載IE 11，有時無法加載。 仔細觀察之后，我發現存在比賽條件。

基本上，每當應用程序失敗時， loadData()函數都不會傳遞到新創建的窗口。 同樣，僅適用於IE11，所有其他瀏覽器似乎都不錯。

我嘗試過的

我嘗試了以下方法：

1>嘗試將等待功能放入ImageGallery應用中，如下所示：

static resolveDocuments(){
    if(typeof window.parent.loadData === 'function'){
      // do the work to show image
    } else {
      setTimeout(this.resolveDocuments, 2000);
    }
  }

我正在使用redux thunk，但沒有得到任何運氣。

2>把imageGalleryWindow.loadData= loadData; 進入window.onload（），不好的主意，但是還是嘗試了

3>把imageGalleryWindow.loadData= loadData; 進入imageViewerWindow.document.addEventListener("DOMContentLoaded", function (event) {}仍然是個壞主意，但還是嘗試了

4>創建了一個新的ImageGallery.html，使用iframe托管ImageGallery應用。 在部分中，包括來自父級的JavaScript文件。 沒運氣

5>創建了一個Webform頁面ImageGallery.aspx，使用iframe托管ImageGallery應用。 在部分中，包括來自父級的JavaScript文件。 沒運氣。

感謝您抽出寶貴的時間閱讀完此問題，如果您有想法可以嘗試，請告訴我。

非常感謝！

射線

Answer 1

我最終擁有的解決方案是html 5本地存儲：

1. 在調用window.open（）填充新窗口之前，請在html 5本地存儲中創建一個我需要傳入的所有數據的條目。

2. 加載圖片庫應用程序時，請檢查是否存在本地存儲項目，如果存在，請提取數據。 數據將一直存在，因為它在生成新窗口之前進行設置，並且由於兩個頁面都來自同一域，因此它們都可以訪問相同的本地存儲。

3. 為避免安全問題，圖庫應用程序從本地存儲讀取數據后，我將數據保留在應用程序中，然后刪除本地存儲條目。

希望這對其他人有幫助。