Un reemplazo universal de createPopup()?

Question

Actualmente, createPopup() solo es compatible con IE (consulte http://help.dottoro.com/ljsxcrhv.php).

¿Hay un reemplazo universal createPopup()? ¿O se requiere un código condicional basado en la detección del navegador?

Afortunadamente, estoy buscando algo que no solo proporcione la misma funcionalidad, sino que tenga la misma interfaz o al menos podría proporcionar los ingredientes para crear clones createPopup() sin demasiado trabajo.

Answer 1

Es posible que desee ver algunas de las bibliotecas de JavaScript que existen. Cosas como Dojo, Yahoo UI o JQuery pueden ayudar a encapsular la mayoría de los dolores de cabeza específicos del navegador. Por ejemplo, con Dojo, eche un vistazo a http://dojotoolkit.org/api/. Esto le daría una funcionalidad similar a createPopup().

Answer 2

¿Qué pasa con window.open()?

http://www.w3schools.com/jsref/met_win_open.asp

Answer 3

así que tenía un lío de código heredado que usa window.createPopup() por lo que cambiar a una biblioteca hubiera sido mucho esfuerzo, y ahora que el IE 11 no soporta este método, hemos tenido que hacer algo ya que nuestra aplicación está diseñada para ser compatible con Explorer. Yo era capaz de resolver esto funcione en otros navegadores escribiendo el código siguiente:

if(!window.createPopup){ 
    window.createPopup = function(){ 
     var popup = document.createElement("iframe"), //must be iframe because existing functions are being called like parent.func() 
      isShown = false, popupClicked = false; 
     popup.src = "about:blank"; 
     popup.style.position = "absolute"; 
     popup.style.border = "0px"; 
     popup.style.display = "none"; 
     popup.addEventListener("load", function(e){ 
      popup.document = (popup.contentWindow || popup.contentDocument);//this will allow us to set innerHTML in the old fashion. 
      if(popup.document.document) popup.document = popup.document.document; 
     }); 
     document.body.appendChild (popup); 
     var hidepopup = function (event){ 
      if(isShown) 
       setTimeout(function(){ 
        if(!popupClicked){ 
         popup.hide(); 
        } 
        popupClicked = false; 
       }, 150);//timeout will allow the click event to trigger inside the frame before closing. 
     } 

     popup.show = function (x, y, w, h, pElement){ 
      if(typeof(x) !== 'undefined'){ 
       var elPos = [0, 0]; 
       if(pElement) elPos = findPos(pElement);//maybe validate that this is a DOM node instead of just falsy 
       elPos[0] += y, elPos[1] += x; 

       if(isNaN(w)) w = popup.document.scrollWidth; 
       if(isNaN(h)) h = popup.document.scrollHeight; 
       if(elPos[0] + w > document.body.clientWidth) elPos[0] = document.body.clientWidth - w - 5; 
       if(elPos[1] + h > document.body.clientHeight) elPos[1] = document.body.clientHeight - h - 5; 

       popup.style.left = elPos[0] + "px"; 
       popup.style.top = elPos[1] + "px"; 
       popup.style.width = w + "px"; 
       popup.style.height = h + "px"; 
      } 
      popup.style.display = "block"; 
      isShown = true; 
     } 

     popup.hide = function(){ 
      isShown = false; 
      popup.style.display = "none"; 
     } 

     window.addEventListener('click', hidepopup, true); 
     window.addEventListener('blur', hidepopup, true); 
     return popup; 
    } 
} 
function findPos(obj, foundScrollLeft, foundScrollTop) { 
    var curleft = 0; 
    var curtop = 0; 
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft); 
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop); 
    if(obj.scrollTop && obj.scrollTop > 0) { 
     curtop -= parseInt(obj.scrollTop); 
     foundScrollTop = true; 
    } 
    if(obj.scrollLeft && obj.scrollLeft > 0) { 
     curleft -= parseInt(obj.scrollLeft); 
     foundScrollLeft = true; 
    } 
    if(obj.offsetParent) { 
     var pos = findPos(obj.offsetParent, foundScrollLeft, foundScrollTop); 
     curleft += pos[0]; 
     curtop += pos[1]; 
    } else if(obj.ownerDocument) { 
     var thewindow = obj.ownerDocument.defaultView; 
     if(!thewindow && obj.ownerDocument.parentWindow) 
      thewindow = obj.ownerDocument.parentWindow; 
     if(thewindow) { 
      if (!foundScrollTop && thewindow.scrollY && thewindow.scrollY > 0) curtop -= parseInt(thewindow.scrollY); 
      if (!foundScrollLeft && thewindow.scrollX && thewindow.scrollX > 0) curleft -= parseInt(thewindow.scrollX); 
      if(thewindow.frameElement) { 
       var pos = findPos(thewindow.frameElement); 
       curleft += pos[0]; 
       curtop += pos[1]; 
      } 
     } 
    } 
    return [curleft,curtop]; 
} 

Voy a empezar por admitir que es bastante fea. Sin embargo, esto funcionó para hacer que el código que llama a este método funcione en otros navegadores, y fue más fácil que cambiar docenas de páginas heredadas (y mal codificadas de otro modo) para usar alguna biblioteca externa, por lo que quizás ayude a alguien más.

Utiliza un iframe y crea una propiedad document porque teníamos un gran código que estaba en la línea popup.document.body.innerHTML = "<span onclick = 'parent.someFunction()'>";. Usar el iframe en lugar de un div permite que esto permanezca en estado de junky y aún funcione.