IE 11 window.open() avec javascript condition de course chargement script question

Question

Objectif:

J'ai une application web ReactJs appelé « ImageGallery » qui est actuellement intégré dans notre système de suite d'affaires (ce qui est un énorme système contient technologies plus anciennes, principalement des formulaires Web). Dans notre système, nous devons ajouter un bouton pour lancer une fenêtre de navigateur pour faire tourner l'application.

app ImageGallery comptent sur le système actuel pour transmettre des données à lui montrer, ce qui signifie, lorsque les charges app ImageGallery, il appelle une fonction sur le côté du système de suite d'affaires comme

window.parent.loadData() 

Comme les données transmis par JavaScript, il n'y a pas d'appel 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; 
} 

fonction loadData() est disponible sur le fichier JavaScript en cours et sera transmis à la nouvelle fenêtre de sorte qu'il peut être utilisé par l'application ReactJS.

Problème:

L'application fonctionne parfaitement avec Chrome/Firefox/Edge, mais pas IE 11. IE 11 parfois des charges, parfois non. Après avoir regardé de plus près, j'ai trouvé qu'il y avait une condition de course.

Fondamentalement, chaque fois que l'application a échoué, la fonction loadData() n'a pas été transmise à la fenêtre nouvellement créée. Encore une fois, c'est seulement pour IE11, tous les autres navigateurs semble bien.

Ce que j'ai essayé:

J'ai essayé les éléments suivants:

1> J'ai essayé de mettre une fonction d'attente dans l'application ImageGallery comme ceci:

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

J'utilise Redux thunk, je n'ai pas eu de chance pour que ça marche.

2> mettre imageGalleryWindow.loadData= loadData; en window.onload(), mauvaise idée, mais essayé

de toute façon

3> mettre en imageGalleryWindow.loadData= loadData;imageViewerWindow.document.addEventListener("DOMContentLoaded", function (event) {} idée encore mal, mais essayé

de toute façon

4> a créé une nouvelle ImageGallery.html, l'utilisation un iframe pour héberger l'application ImageGallery. Dans la section, incluez le fichier JavaScript du parent. Pas de chance

5> créé une page de formulaire Web ImageGallery.aspx, utilisez une iframe pour héberger l'application ImageGallery. Dans la section, incluez le fichier JavaScript du parent. Pas de chance.

Merci d'avoir pris le temps de finir de lire ce problème, et s'il vous plaît faites le moi savoir si vous avez une idée que je peux essayer.

Merci beaucoup!

Ray

Answer 1

La solution que je finis par avoir est html 5 stockage local:

1. Avant d'appeler window.open() pour la nouvelle fenêtre, créez une entrée en html 5 stockage local avec toutes les données dont j'ai besoin de passer.

2. Lorsque l'application Galerie d'images se charge, vérifiez si des éléments de stockage local existent, si c'est le cas, tirez les données. Les données seront toujours là, car elles sont définies avant la génération d'une nouvelle fenêtre, et comme les deux pages proviennent du même domaine, elles peuvent toutes deux accéder au même stockage local. Pour éviter les problèmes de sécurité, après que l'application Galerie d'images a lu les données du stockage local, je conserve une copie des données dans l'application, puis supprime l'entrée de stockage local.

Espérons que cela peut être utile à d'autres personnes.