方法一:onload
// 打開模態窗口
// 打開模態窗口
openWindow1(url, title, w, h) {
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
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 left = ((width / 2) - (w / 2)) + dualScreenLeft;
const top = ((height / 2) - (h / 2)) + dualScreenTop;
const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
newWindow.onload = function () {
// 定時器根據實際情況取捨。
setTimeout(function () {
newWindow.document.title = title;
}, 100)
}
if (window.focus) {
newWindow.focus();
}
}
方法二 :iframe
// 打開模態窗口
// 打開模態窗口
openWindow(url, title, w, h) {
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
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 left = ((width / 2) - (w / 2)) + dualScreenLeft;
const top = ((height / 2) - (h / 2)) + dualScreenTop;
const newWindow = window.open('about:blank', title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
newWindow.document.title = title;
let iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.width = '100%';
iframe.style.height = '100vh';
iframe.style.margin = '0';
iframe.style.padding = '0';
iframe.style.overflow = 'hidden';
iframe.style.border = 'none';
newWindow.document.body.style.margin = '0';
newWindow.document.body.appendChild(iframe);
if (window.focus) {
newWindow.focus();
}
}
推薦 第二種
第一種嵌套少一層,但是加載的html時候會優先加載自己的title,導致標題會變動一次,顯示效果差一些。
第二種就不會有這種問題,但是多嵌套了一層。
大家可根據自己的需求使用。