目前仅在IE中支持createPopup()
(请参阅http://help.dottoro.com/ljsxcrhv.php)。
是否有通用createPopup()
替代品?或者是基于浏览器检测所需的条件代码?
希望我正在寻找的东西不仅提供相同的功能,而且具有相同的界面,或者至少可以提供创建createPopup()
克隆的成分而无需太多工作。
答案 0 :(得分:14)
所以我有一大堆使用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 :(得分:1)
你可能想看看那里的一些JavaScript库。像Dojo,Yahoo UI或JQuery这样的东西可以帮助封装大多数特定于浏览器的麻烦。例如,使用Dojo,请查看http://dojotoolkit.org/api/。这将使您获得与createPopup()类似的功能。
答案 2 :(得分:0)
关于window.open()
?