window对象下open、close、opener函数的使用

最新推荐文章于 2025-05-18 10:59:33 发布

教官爱编程

最新推荐文章于 2025-05-18 10:59:33 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/racy696/article/details/77512745

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了JavaScript中window对象的open、close及opener属性的应用。通过示例演示了如何从父页面打开子页面，并实现子页面自动关闭及调用父页面函数的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//父页面内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            作者：李瑞琦
            时间：2017-08-23
            描述：js中window对象下open、close、opener函数的学习
        -->
        <script type="text/javascript">
            //父页面打开子页面
            function testOpen(){
                window.open("MyJs09.html","son")
            }
            //父页面内容
            function testOpen2(){
                alert("我是父页面");
            }
        </script>
    </head>
    <body>
        <h3>js中window对象下open、close、opener属性的学习</h3>
        <hr />
        <input type="button" id="" name="" value="测试打开子页面按钮" onclick="testOpen()"/>
    </body>
</html>


//子页面内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>son</title>
        <script type="text/javascript">
            //倒计时关闭网页功能
            function closePage(){
                window.setInterval(function(){
                    //获取倒计时内容
                    var num = document.getElementById("num");
                    //将倒计时内容-1
                    num.innerHTML = num.innerHTML-1;
                    //判断
                    if (num.innerHTML==0) {
                        //关闭子页面
                        window.close();
                    }
                },1000)
            }
            //子页面调用父页面的函数
            function sonFunction(){
                window.opener.testOpen2();
            }
        </script>
    </head>
    <body onload="closePage()">
        我是子页面，页面会在<font size="10px" id="num" color="red">5</font>秒后自动关闭。
        <input type="button" id="" name="" value="此按钮调用父页面的函数" onclick="sonFunction()" />
    </body>
</html>