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

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

标签：

JavaScript

在实际项目中，我们通常是通过父级页面去打开子页面，例如一些列表页面会通过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>

点击查看更多内容