我们如何将通过 javascriptwindow.open
函数打开的弹出窗口在屏幕变量的中心居中到当前选择的屏幕分辨率?
在屏幕上居中弹出窗口?
IT技术
javascript
2021-01-15 20:43:30
6个回答
单/双显示器功能(归功于http://www.xtf.dk - 谢谢!)
更新:由于@Frost,它现在也适用于没有最大化到屏幕宽度和高度的窗口!
如果您在双显示器上,窗口将水平居中,而不是垂直居中……使用此功能来解决这个问题。
const popupCenter = ({url, title, w, h}) => {
// Fixes dual-screen position Most browsers Firefox
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
const systemZoom = width / window.screen.availWidth;
const left = (width - w) / 2 / systemZoom + dualScreenLeft
const top = (height - h) / 2 / systemZoom + dualScreenTop
const newWindow = window.open(url, title,
`
scrollbars=yes,
width=${w / systemZoom},
height=${h / systemZoom},
top=${top},
left=${left}
`
)
if (window.focus) newWindow.focus();
}
用法示例:
popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});
信用转到:http : //www.xtf.dk/2011/08/center-new-popup-window-even-on.html(我只想链接到此页面,但以防万一该网站出现故障代码在这里,干杯!)
像这样尝试:
function popupwindow(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
由于在多显示器设置中确定当前屏幕中心的复杂性,更简单的选择是将弹出窗口置于父窗口的中心。只需将父窗口作为另一个参数传递:
function popupWindow(url, windowName, win, w, h) {
const y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2);
const x = win.top.outerWidth / 2 + win.top.screenX - ( w / 2);
return win.open(url, windowName, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`);
}
执行:
popupWindow('google.com', 'test', window, 200, 100);
来源:http : //www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
return targetWin;
}
如果你想把它放在你当前所在的框架上,我会推荐这个功能:
function popupwindow(url, title, w, h) {
var y = window.outerHeight / 2 + window.screenY - ( h / 2)
var x = window.outerWidth / 2 + window.screenX - ( w / 2)
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);
}
类似于 Crazy Tim 的回答,但不使用 window.top。这样,即使窗口嵌入到来自不同域的 iframe 中,它也能工作。
其它你可能感兴趣的问题