Универсальная замена createPopup ()? - PullRequest
8 голосов
/ 28 сентября 2010

В настоящее время createPopup() поддерживается только в IE (см. http://help.dottoro.com/ljsxcrhv.php).

Есть ли универсальная createPopup() замена? Или условный код требуется на основе обнаружения в браузере?

Надеюсь, я ищу что-то, что не только обеспечивает такую ​​же функциональность, но имеет тот же интерфейс или, по крайней мере, может предоставить компоненты для создания клона createPopup() без особой работы.

Ответы [ 3 ]

14 голосов
/ 27 марта 2014

Итак, у меня был целый беспорядок унаследованного кода, который использовал window.createPopup(), поэтому переход на библиотеку потребовал бы больших усилий, и теперь, когда IE 11 не поддерживает этот метод, нам пришлось что-то делать, так как наше приложениепостроен для поддержки Explorer.Я смог решить эту проблему для работы в других браузерах, написав следующий код:

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

Начну с признания, что это довольно некрасиво.Однако это помогло мне сделать так, чтобы код, вызывающий этот метод, работал в других браузерах, и было проще, чем заменить десятки устаревших (и плохо закодированных) страниц на использование какой-либо внешней библиотеки, поэтому, возможно, это поможет кому-то еще.

Он использует iframe и создает для него свойство document, потому что у нас было много кода, который соответствовал popup.document.body.innerHTML = "<span onclick = 'parent.someFunction()'>";.Использование iframe вместо div позволяет этому оставаться в старом состоянии и все еще работать.

1 голос
/ 28 сентября 2010

Возможно, вы захотите взглянуть на некоторые библиотеки JavaScript там.Такие вещи, как Dojo, Yahoo UI или JQuery, могут помочь инкапсулировать большинство проблем, связанных с браузером.Например, с Dojo, посмотрите на http://dojotoolkit.org/api/. Это даст вам аналогичную функциональность для createPopup ().

0 голосов
/ 28 сентября 2010

Что случилось с window.open()?

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...