在实际项目中，我们通常是通过父级页面去打开子页面，例如一些列表页面会通过url上面携带的参数去打开子页面，这是根据参数就可以调用对应的函数获取不同的数据，达到动态渲染子页面的效果。这是一个很常见的功能，但是如果需求是反过来呢？比如有一个需求是这样子的：当用户在子页面进行了点击操作之后，改变父级页面的内容，这是我们改怎么编码呢？答案是通过window.opener，具体改怎么做呢，下面为大家介绍一下
首先写一个函数，通过window.open去打开子页面
function openTest(){
var url = "0622-1.html";//实际项目中，url应该换成参数，在调用是传参
var openPageCreate = window.open(url, '_blank', "123456", 'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-70)+ ',top=5,left=35,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
openPageCreate.moveTo(5,35);
openPageCreate.resizeTo(window.screen.availWidth - 10, window.screen.availHeight - 70);
}打开子页面之后，通过window.opener获取到父页面
window.opener.document.getElementById("p").innerHTML="子页面修改父页面";//向父页面传值操作起来和平时写法一直，也可以通过缓存（如localStorage）等，把需要的数据保存起来，再在父页面获取
父页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父页面</title>
<style>
.son{
width: 100px;
height: 100px;
background-color: #006C66;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="0622-1.html?test=1">通过url上携带的参数，执行子页面函数</a>
</li>
<li>
<a href="0622-1.html?test=2">子页面链接2</a>
</li>
<li>
<a href="0622-1.html?test=3">子页面链接3</a>
</li>
<li>
<a href="0622-1.html?test=4">子页面链接4</a>
</li>
</ul>
</div>
<div id="p">这是测试内容</div>
<div id="son" class="son">
</div>
<div id="p2">
会被改变吗
</div>
<button onclick="openTest()">打开底表</button>
</body>
<script>
function openTest(){
var url = "0622-1.html";//实际项目中，url应该换成参数，在调用是传参
var openPageCreate = window.open(url, '_blank', "123456", 'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-70)+ ',top=5,left=35,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
openPageCreate.moveTo(5,35);
openPageCreate.resizeTo(window.screen.availWidth - 10, window.screen.availHeight - 70);
}
function sonFun(){//打开子页面的时候，会执行这个方法
var sonContent = JSON.parse(localStorage.getItem('sonData'));
document.getElementById("son").innerHTML = sonContent.content;
document.getElementById("son").style.background = "yellowgreen";
}
</script>
</html>子页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子页面</title>
</head>
<body onload="allFun()">
<div>测试数据</div>
<button onclick="changeP()">改变</button>
</body>
<script>
function allFun(){
window.opener.document.getElementById("p").innerHTML="子页面修改父页面";//向父页面传值
//window.opener.location.reload(); //刷新父级页面
var testData = {name:"测试",id:"123456",content:"缓存数据给父级"};
dataTest(JSON.stringify(testData));
window.opener.sonFun();//放在要缓存的数据之后
}
function dataTest(data){//缓存数据
localStorage.setItem('sonData',data);
}
function changeP(){
window.opener.document.getElementById("p2").innerHTML="改变内容";//向父页面传值
}
</script>
</html>