- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
[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]; }
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
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 13 | [Next.js 개발] pm2 로 Next.js 실행하기 | 졸리운_곰 | 2025.07.01 | 480 |
| 12 | [Next.js 개발] NextAuth.js 를 이용한 자체 로그인 구현 | 졸리운_곰 | 2024.03.09 | 560 |
| 11 |
[Next.js 개발] Using Next.js Version 13
| 졸리운_곰 | 2024.03.09 | 409 |
| 10 |
[Next.js 개발] Common Errors in Next.js and How to Resolve Them
| 졸리운_곰 | 2024.03.09 | 468 |
| 9 | [Next.js 개발] [Javascript] 현재 날짜, 시간 구하기 | 졸리운_곰 | 2024.03.09 | 431 |
| 8 |
[Next.js 개발] Using Next.js Version 13 : Next.js 버전 13 사용
| 졸리운_곰 | 2024.03.07 | 499 |
| 7 |
[Next.js 개발] [React] useEffect에서 async/await
| 졸리운_곰 | 2024.03.06 | 362 |
| 6 |
[next.js 개발] How to use fetch API in Next.js?
| 졸리운_곰 | 2024.03.05 | 368 |
| 5 | [next.js 개발] Next.js14에 Mysql연결하기 | 졸리운_곰 | 2024.03.05 | 458 |
| 4 |
[next.js 개발] How To Connect MySQL And Auth To A Next.js App
| 졸리운_곰 | 2024.03.05 | 323 |
| 3 |
[next.js 개발] Next.js 소개와 14 버전 변경사항 – React 인기 라이브러리
| 졸리운_곰 | 2024.03.05 | 523 |
| 2 | [next.js 개발] next.js API 호출시 - 수신부따로 호출하고 await 붙일것 | 졸리운_곰 | 2024.03.05 | 555 |
| 1 | [next.js 개발] [Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이) | 졸리운_곰 | 2024.03.05 | 457 |

