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

Question

目标：

我有一个名为 "ImageGallery" 的 ReactJs Web 应用程序，目前已集成到我们的业务套件系统中（这是一个包含旧技术的庞大系统，主要是 Web 表单）。在我们的系统中，我们需要添加一个按钮来启动浏览器 window 来旋转应用程序。

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 文件中可用，并将传递给新的 window 以便 ReactJS 应用程序可以使用它。

问题：

该应用与 Chrome/Firefox/Edge 完美兼容，但与 IE 11 不兼容。IE 11 有时加载，有时不加载。仔细查看后，我发现存在竞争条件。

基本上每当应用程序失败时，loadData() 功能都没有传递给新创建的 window。同样，这仅适用于 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> 创建了一个网络表单页面 ImageGallery.aspx，使用 iframe 托管 ImageGallery 应用程序。在部分中，包含来自父项的 JavaScript 文件。运气不好。

感谢您花时间阅读这个问题，如果您有想法，请告诉我。

非常感谢！

雷

Answer 1

我最终得到的解决方案是 html 5 个本地存储：

在调用 window.open() 填充新的 window 之前，在 html 5 本地存储中创建一个条目，其中包含我需要传入的所有数据.
当图库应用程序加载时，检查本地存储项目是否存在，如果存在，则拉取数据。数据将始终存在，因为它在新 window 生成之前设置，并且由于两个页面都来自同一个域，它们都可以访问同一个本地存储。
为了避免安全问题，在图库应用程序从本地存储读取数据后，我在应用程序中保留了一份数据副本，然后删除了本地存储条目。

希望这对其他人有所帮助。

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

IE 11 window.open() with javascript script loading race condition issue

javascript

race-condition

internet-explorer-11

reactjs