javascript - IE 11 window.open() 与 javascript 脚本加载竞争条件问题

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 完美配合，但不适用于 IE 11。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. 为了避免安全问题，图片库应用从本地存储读取数据后，我会在应用内保留数据的副本，然后删除本地存储条目。

希望这对其他人有帮助。