[IE javascript to Chrome] A universal createPopup() replacement

A universal createPopup() replacement

Questions : A universal createPopup() replacement

Currently createPopup() is only supported in IE (See http://help.dottoro.com/ljsxcrhv.php).

Is there a universal createPopup() replacement? Or is conditional code required based on browser detection?

Hopefully, I am looking for something that not only provides the same functionality, but has the same interface or at least could provide the ingredients to create createPopup() clone without too much work.

 

Answers 1 : of A universal createPopup() replacement

So I had a whole mess of legacy code that used window.createPopup() so changing to a library would have been a lot of effort, and now that IE 11 doesn't support this method, we had to do something since our app is built to support Explorer. I was able to solve this to work in other browsers by writing the following code:

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

 

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

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

I'll start by admitting that it's pretty ugly. However, this worked for me to make the code that calls this method work in other browsers, and was easier than changing dozens of legacy (and poorly coded otherwise) pages to use some outside library, so perhaps it will help someone else out there.

It uses an iframe and creates a document property on it because we had a lot of code that was along the lines of popup.document.body.innerHTML = "<span onclick = 'parent.someFunction()'>";. Using the iframe instead of a div allows this to remain in it's junky state and still work.

Answers 2 : of A universal createPopup() replacement

You may want to look at some of the JavaScript libraries out there. Things like Dojo, Yahoo UI, or JQuery can help to encapsulate most of the browser-specific headaches. For example, with Dojo, take a look at http://dojotoolkit.org/api/. This would get you similar functionality to createPopup().

Answers 3 : of A universal createPopup() replacement

Whats up with window.open()?

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

[출처] https://www.anycodings.com/1questions/1647707/a-universal-createpopup-replacement

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
485 [node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기 file 졸리운_곰 2023.04.25 10
484 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 2/2 졸리운_곰 2023.03.31 7
483 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 1/2 file 졸리운_곰 2023.03.31 8
482 [Javascript][persistent storage] persistent storage of Javascript file 졸리운_곰 2023.02.05 11
481 [JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법 졸리운_곰 2023.01.26 9
480 [HTML/Javascript] 웹소켓(WEBSOCKET) 시작하기(강의,번역) file 졸리운_곰 2022.11.15 15
479 [HTML/Javascript] 웹소켓 튜터리얼 졸리운_곰 2022.11.15 4
478 [HTML, Javascript] JavaScript에 변수가 있는지 확인 졸리운_곰 2022.11.15 10
477 [html, javascript] JavaScript에서 함수가 완료 될 때까지 기다립니다 졸리운_곰 2022.11.15 43
» [IE javascript to Chrome] A universal createPopup() replacement 졸리운_곰 2022.11.14 8
475 [web개발][javascript] TypeScript 기본 문법 정리 졸리운_곰 2022.11.05 11
474 [HTML/Javascript] indexedDB에 대해 알아보자! file 졸리운_곰 2022.09.15 57
473 [HTML][Javascript] JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용 file 졸리운_곰 2022.09.09 9
472 [HTML] Div 를 새창 팝업으로 띄우기 졸리운_곰 2022.09.09 7
471 [Web Design][웹 디자인] Sass(SCSS) 완전 정복! 졸리운_곰 2022.07.31 91
470 [Apache 운영] 404 에러페이지 전환 How to Redirect 404 to Homepage using .htaccess 졸리운_곰 2022.07.28 46
469 [JWT} [WEB] JWT(Json Web Token)란? 개념 정리 및 예제 file 졸리운_곰 2022.07.15 38
468 [php worldpress] [위 에]wordpress 사용자 암호 화 원리 및 알고리즘 분석 졸리운_곰 2022.04.11 13
467 [HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기 file 졸리운_곰 2022.02.14 23
466 [node.js 응용] PM2 - Node.js 프로세스 관리 도구 file 졸리운_곰 2021.12.10 18
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED