【问题标题】:A universal createPopup() replacement?通用的 createPopup() 替代品?
【发布时间】:2011-04-17 23:42:04
【问题描述】:

目前createPopup() 仅在 IE 中受支持(请参阅http://help.dottoro.com/ljsxcrhv.php)。

是否有通用的createPopup() 替代品?或者是否需要基于浏览器检测的条件代码?

希望我正在寻找的东西不仅提供相同的功能,而且具有相同的界面,或者至少可以提供创建createPopup() 克隆的成分而无需太多工作。

【问题讨论】:

    标签: javascript internet-explorer replace popup


    【解决方案1】:

    所以我有一大堆使用 window.createPopup() 的遗留代码,所以更改为库会很费力,现在 IE 11 不支持这种方法,我们不得不做一些事情,因为我们的应用程序旨在支持资源管理器。通过编写以下代码,我能够在其他浏览器中解决这个问题:

    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 可以让它保持在垃圾状态并且仍然可以工作。

    【讨论】:

    • 这对我有很大帮助,谢谢!。我刚刚在 load `popup.document = popup.contentWindow || 中添加了行popup.contentDocument);` ...在body.appendChild之后
    【解决方案2】:

    您可能想看看那里的一些 JavaScript 库。 Dojo、Yahoo UI 或 JQuery 之类的东西可以帮助封装大多数特定于浏览器的问题。例如,对于 Dojo,请查看 http://dojotoolkit.org/api/。这将为您提供与 createPopup() 类似的功能。

    【讨论】:

    • 已编辑为指向通用的非版本化 API 页面。谢谢你告诉我,克里斯。
    【解决方案3】:

    window.open() 怎么样了?

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

    【讨论】:

    • window.open() 比 createPopup() 更显眼。
    • 碍眼?你这是什么意思?
    • 弹出对象没有窗口框架,不会将焦点从当前页面上移开,并且一旦用户停止与之交互就会自行关闭。
    • 是的,你是对的。以这种方式争论意味着更好地使用 Dante617 描述的 JavaScript 框架的特性。
    猜你喜欢
    • 1970-01-01
    • 2015-03-09
    • 1970-01-01
    • 2016-04-23
    • 1970-01-01
    • 2015-06-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多