Ein universeller createPopup() Ersatz?

Question

Derzeit wird createPopup() nur in IE unterstützt (siehe http://help.dottoro.com/ljsxcrhv.php).

Gibt es einen universellen createPopup() Ersatz? Oder ist Bedingungscode aufgrund der Browsererkennung erforderlich?

Hoffentlich bin ich auf der Suche nach etwas, das nicht nur die gleiche Funktionalität bietet, aber hat die gleiche Schnittstelle oder könnte zumindest die Zutaten createPopup() Klon ohne zu viel Arbeit zu schaffen.

Answer 1

Sie können sich einige JavaScript-Bibliotheken ansehen. Dinge wie Dojo, Yahoo UI oder JQuery können dazu beitragen, die meisten browserspezifischen Probleme zu kapseln. Schauen Sie sich zum Beispiel mit Dojo http://dojotoolkit.org/api/ an. Dadurch erhalten Sie ähnliche Funktionen wie createPopup().

Answer 2

Was ist los mit window.open()?

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

Answer 3

So hatte ich eine ganze Durcheinander von Legacy-Code, der window.createPopup() so zu einer Bibliothek zu ändern verwendet würde viel Aufwand gewesen, und jetzt, dass der IE 11 nicht diese Methode nicht unterstützt, wir hatten zu tun etwas, da unsere App zur Unterstützung von Explorer entwickelt wurde. Ich war in der Lage, diese zu lösen, indem er den folgenden Code in anderen Browsern zu arbeiten:

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

ich durch das Eingeständnis beginnen werde, dass es ziemlich hässlich. Allerdings funktionierte das für mich, damit der Code, der diese Methode aufruft, in anderen Browsern funktioniert und einfacher war, als Dutzende von älteren (und schlecht codierten) Seiten zu ändern, um eine externe Bibliothek zu verwenden.

Es verwendet einen iframe und erstellt eine document Eigenschaft, weil wir eine Menge Code hatten, der entlang der Linien popup.document.body.innerHTML = "<span onclick = 'parent.someFunction()'>"; war. Wenn Sie den iframe anstelle eines div verwenden, bleibt dies im Junky-Zustand und funktioniert weiterhin.