Problèmes avec IE et l'ajout à la fenêtre.opener

Question

J'ai le script suivant qui fonctionne bien dans Firefox et Chrome (pas sûr pour les autres navigateurs), mais il ne fonctionne pas du tout dans IE. Il ouvre essentiellement une popup qui ajoute une div pour mettre en évidence un élément dans l'ouvreur de fenêtre. Je veux que cela fonctionne sur plusieurs pages d'un même site, donc je ne voulais pas ajouter une fonction pour créer le div dans la fenêtre principale (window.opener). Désolé de ne pas avoir pu poster une démo fonctionnelle - window.opener ne fonctionne pas dans une corbeille.

<button>Open popup</button>
<script type="text/javascript">
$(document).ready(function(){
 $(':button').click(function(){
  var highlight = "" +
   "<button>Click to Add Highlight</button>" +
   "<scr"+"ipt type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></scr"+"ipt>" +
   " <scr"+"ipt type='text/javascript'>" +
   " $(':button').click(function(){" +
   "  $('<div/>', {" +
   "   'class': 'highlight'," +
   "   css: {" +
   "    position:   'absolute'," +
   "    height:     '50px'," +
   "    width:      '50px'," +
   "    left:       '200px'," +
   "    top:        '200px'," +
   "    background: '#fff'," +
   "    opacity:    0.5," +
   "    zIndex:     99" +
   "   }" +
   "  }).appendTo( $(window.opener.document.body) );" +
   " })" +
   " </scr"+"ipt>";
  var w = window.open('','highlighter','toolbar=0,location=0,status=0,width=200,height=100,scrollbars=1,resizable=1');
  w.document.write(highlight);
  w.document.close();
 })
})
</script>

J'ai également essayé d'utiliser appendChild sans succès. J'ai fini par trouver cette méthode qui fonctionne, mais c'est une solution horrible qui fait clignoter la page.

if ($.browser.msie){
 var d = '<div class="highlight" style="position:absolute;height:50px;' +
  'width:50px;left:200px;top:200px;background:#fff;opacity:0.5;' +
  'filter:alpha(opacity=50);zIndex:99;"></div>';
 window.opener.document.body.innerHTML = window.opener.document.body.innerHTML + d;
}

Quelqu'un connaît-il une meilleure solution ?

Answer 1

Je pense avoir trouvé le problème. C'est peut-être un bug de jQuery, mais je ne peux pas dire... Je vais poster une autre question pour obtenir de l'aide.

J'ai donc trouvé la solution à ce problème en ajoutant simplement une chaîne. Pour une raison quelconque, jQuery dans IE ne veut pas ajouter un objet. Donc ça marche :

if ($.browser.msie){
 var d = '<div class="highlight" style="position:absolute;height:50px;width:50px;left:200px;' + 
  'top:200px;background:#fff;opacity:0.5;filter:alpha(opacity=50);zIndex:99;"></div>';
 $(window.opener.document.body).append(d);
}

---

Edit : Pointy a résolu mon problème en une autre question . Il s'avère que ce n'est pas un bogue, mais qu'IE ne vous permet pas d'ajouter un objet créé en dehors de la fenêtre. Sa solution est la suivante :

window.opener.$('<div/>', {
 'class': 'highlight',
 css: {
  position:   'absolute',
  height:     '50px',
  width:      '50px',
  left:       '200px',
  top:        '200px',
  background: '#fff',
  opacity:    0.5,
  zIndex:     99
 }
}

Mais assurez-vous que le window.opener utilise jQuery v1.4 ou plus.

Answer 2

Vous ne l'avez pas ouvert

var w = window.open(...);
w.document.open(); //Open the document up
w.document.write(highlight);
w.document.close();

Eric