Pregunta

Tengo el siguiente script que funciona bien en Firefox y Chrome (no estoy seguro acerca de otros navegadores), pero no funciona en absoluto en el IE. Básicamente, se abre una ventana emergente que añade un div para resaltar un elemento en la apertura de la ventana. Quiero que funcione a través de múltiples páginas en el mismo sitio, por lo que no quería añadir una función para crear el div en la ventana principal (window.opener). Siento no haber podido publicar una demo de trabajo - window.opener no funciona en un contenedor

.
<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>

También he tratado de usar appendChild sin éxito. Me encontré en última instancia, este método funcione, pero es una solución horrible y hace que la página parpadear.

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;
}

Alguien sabe de una solución mejor?

¿Fue útil?

Solución

Creo que he encontrado el problema. Podría ser un error jQuery, pero no puede decir ... Voy a publicar otra pregunta para obtener ayuda.

Así que he encontrado la solución a este problema simplemente añadiendo una cadena. Por alguna razón jQuery en el IE no se anexará un objeto. Así funciona esto:

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);
}

Editar puntiagudo resolvió mi problema en la otra pregunta . Resulta que no es un error, pero IE no lo que le permite añadir un objeto creado fuera de la ventana. Sus soluciones es el siguiente:

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

Sin embargo, asegúrese de que el window.opener está utilizando jQuery v1.4 o superior.

Otros consejos

Usted no abres

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

Eric

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top