首页 文章

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

提问于
浏览 次
1

Goal:

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

ImageGallery应用程序依靠当前系统将数据传递给它来显示，这意味着，当ImageGallery应用程序加载时，它会调用业务套件系统端的功能，如

window.parent.loadData()

由于数据是通过JavaScript传递的，因此没有ajax调用 .

Code:

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应用程序可以使用它 .

Problem:

该应用程序与Chrome / Firefox / Edge完美配合，但不适用于IE 11. IE 11有时会加载，有时不加载 . 仔细看后，我发现有一个竞争条件 .

基本上，每当应用程序失败时， loadData() 函数尚未传递给新创建的窗口 . 再次，这只适用于IE11，所有其他浏览器似乎都很好 .

What I've tried:

我尝试了以下方法：

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文件 . 没运气 .

感谢您花时间完成阅读此问题，如果您有任何想法，请告诉我 .

非常感谢！

射线

javascript reactjs internet-explorer-11 race-condition

1 回答

  • 0

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

    • 在调用window.open（）填充新窗口之前，在html 5本地存储中创建一个条目，其中包含我需要传入的所有数据 .

    • 加载图库应用程序时，检查是否存在本地存储项目，如果存在，则拉取数据 . 数据将始终存在，因为它在生成新窗口之前设置，并且由于两个页面都来自同一个域，因此它们都可以访问相同的本地存储 .

    • 为避免安全问题，在图库浏览器应用程序从本地存储中读取数据后，我会在应用程序中保留数据副本，然后删除本地存储条目 .

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

    回复于

相关问题