通过window.opener实现子页面对父页面的操作

在实际项目中，我们通常是通过父级页面去打开子页面，例如一些列表页面会通过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）等，把需要的数据保存起来，再在父页面获取

父页面代码

    
        
        
        
            .son{
                width: 100px;
                height: 100px;
                background-color: #006C66;
            }
        
    
    
        
            

                

                    通过url上携带的参数，执行子页面函数
                
                

                    子页面链接2
                
                

                    子页面链接3
                
                

                    子页面链接4
                
            
        
        这是测试内容
        
            
        
        
            会被改变吗
        
        打开底表
    
    

子页面代码

    
        
        
    
    
        测试数据
        改变