Un remplacement universel de createPopup()?

Question

Actuellement, createPopup() n'est pris en charge que dans IE (voir http://help.dottoro.com/ljsxcrhv.php).

Existe-t-il un remplacement universel createPopup()? Ou un code conditionnel est-il requis en fonction de la détection du navigateur?

J'espère que je cherche quelque chose qui offre non seulement la même fonctionnalité, mais a la même interface ou au moins pourrait fournir les ingrédients pour créer le clone createPopup() sans trop de travail.

Answer 1

Vous voudrez peut-être regarder certaines des bibliothèques JavaScript disponibles. Des choses comme Dojo, Yahoo UI, ou JQuery peuvent aider à encapsuler la plupart des maux de tête spécifiques au navigateur. Par exemple, avec Dojo, jetez un oeil à http://dojotoolkit.org/api/. Cela vous donnerait une fonctionnalité similaire à createPopup().

Answer 2

Qu'est-ce qui se passe avec window.open()?

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

Answer 3

donc j'ai eu un gâchis tout code existant qui a utilisé window.createPopup() changeant ainsi à une bibliothèque aurait été beaucoup d'efforts, et maintenant que IE 11 ne supporte pas cette méthode, nous avons dû faire quelque chose depuis notre application est conçue pour soutenir Explorer. Je suis en mesure de résoudre cela fonctionne dans d'autres navigateurs en écrivant le code suivant:

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

Je vais commencer par admettre qu'il est assez laid. Cependant, cela a fonctionné pour moi de faire fonctionner le code qui appelle cette méthode dans d'autres navigateurs, et était plus facile que de changer des dizaines de pages héritées (et mal codées autrement) pour utiliser une bibliothèque extérieure.

Il utilise un iframe et crée une document propriété sur elle parce que nous avions beaucoup de code qui a été le long des lignes de popup.document.body.innerHTML = "<span onclick = 'parent.someFunction()'>";. Utiliser l'iframe au lieu d'un div permet à cela de rester dans son état junky et fonctionne toujours.