javascript 通用的 createPopup() 替换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3807709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A universal createPopup() replacement?
提问by Rex Butler
Currently createPopup()is only supported in IE (See http://help.dottoro.com/ljsxcrhv.php).
目前createPopup()仅支持 IE（参见http://help.dottoro.com/ljsxcrhv.php）。
Is there a universal createPopup()replacement? Or is conditional code required based on browser detection?
有通用的createPopup()替代品吗？还是需要基于浏览器检测的条件代码？
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.
希望我正在寻找的东西不仅提供相同的功能，而且具有相同的界面，或者至少可以提供createPopup()无需太多工作即可创建克隆的成分。
采纳答案by MikeTheReader
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().
您可能想查看一些 JavaScript 库。Dojo、Yahoo UI 或 JQuery 之类的东西可以帮助封装大多数特定于浏览器的头疼问题。例如，对于 Dojo，请查看http://dojotoolkit.org/api/。这将为您提供与 createPopup() 类似的功能。
回答by Will P.
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:
所以我有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];
}
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 documentproperty 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.
它使用 iframe 并document在其上创建一个属性，因为我们有很多代码都与popup.document.body.innerHTML = "<span onclick = 'parent.someFunction()'>";. 使用 iframe 而不是 div 允许它保持在它的垃圾状态并且仍然可以工作。
