2010-02-17 3 views
1

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

<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 finalement trouvé cette méthode pour fonctionner, mais c'est une solution horrible et 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 une meilleure solution?

+0

Que diable est avec la concaténation de chaînes supplémentaires, comme '"

+2

Si vous ne cassez pas le tag de script, le navigateur le rend – Mottie

Répondre

2

Je pense avoir trouvé le problème. Ce pourrait être un bug jQuery, mais je ne peux pas le dire ... Je posterai 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 va pas ajouter un objet. Donc, cela fonctionne:

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 résolu mon problème dans another question. Il s'avère que ce n'est pas un bug, mais IE ne vous permettant pas d'ajouter un objet créé en dehors de la fenêtre. Ses solutions sont les suivantes:

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 est en utilisant jQuery v1.4 ou plus.

0

Vous ne l'ouvrez

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

Eric

+0

Merci pour la réponse Eric, mais l'ajout de 'document.open' n'a rien changé. – Mottie