window.open打开新窗口left不生效以及父子界面交互传参

今天做个功能,通过window.open(url,'_blank','width=400, height=400, left=100, top=100') ,这样写在只有一个显示器的电脑上展示没有问题,新打开的窗口位置确实离左侧100px,但是放到有分屏的显示器上,就跑偏了,特此记录下解决方式,避免下次踩坑;

解决代码如下:

//screen.width=显示屏幕的宽度,就是您的Windows设置的分辨率,w变量值因为业务需要所以对大小屏做了个判断,可自行设置,一般默认1000就可以居中
var w = screen.width < 1500 ? 870 : 1350;
 
var x = (window.screenX || window.screenLeft || 0) + (screen.width - w) / 2;
 
//因为window.open的第三个参数想要生效,需要在一个字符串中用逗号分隔,所以把left拼接在最后一个即可
myWindow = window.open(URL, '_blank', 'height=400, width=400, top=170, menubar=no, scrollbars=no, resizable=no,location=no, status=no, left='+x);
 
父子界面通信
window.open父子界面通信有很多种方法,一般常用的就是地址栏传参,比如下面这种写法:
 
第一种(父传子,子获取):
//父界面
window.open('module/index/his_video.html?startTime='+startTime+'&endTime='+endTime, '_blank', 'height=800, width=600, top=170, menubar=no, scrollbars=no, resizable=no,location=no, status=no, left=100');
 
//子界面
 
/**首先定义方法解析参数**/
function getSearch(str) {
if (!str) return;
str = decodeURI(str);//这个方法是给URL进行解析,解决中文乱码问题
str = str.slice(1);
let arr = str.split("&");
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("=");
publicVar[arr[i][0]] = arr[i][1];
}
return publicVar;
}
 
//执行就可以拿到对应参数值
getSearch(location.search);
 
 
第二种(子去拿父):
 
//父界面定义隐藏域存值
<input type="hidden"  value="" id="historyEventList">
 
//子界面取值
opener.document.getElementById("historyEventList").value;
 
//子界面去调用父界面相关方法
opener.方法名()
 
好了记录就到这,后续有问题再沟通吧;
原文地址:https://www.cnblogs.com/fmixue/p/13966451.html