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.方法名()

 

好了记录就到这，后续有问题再沟通吧；