BOM Window

最新推荐文章于 2022-08-25 19:33:04 发布

Charelesa

最新推荐文章于 2022-08-25 19:33:04 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/qq_21923867/article/details/60881669

版权

Window 对象

属性

- closed 返回窗口是否已被关闭
- length 设置或返回窗口中的框架数量
- opener 返回对用open方法打开当前窗口的那个窗口
- parent 返回父窗口  
- self 返回对当前窗口的引用 
- top 返回最顶层的父辈窗口 
- window window 属性等价于 self 属性，它包含了对窗口自身的引用 
- window.frames 返回窗口中所有命名的框架对应的window对象
- iframe在在页面内嵌入一个窗口，并显示窗口内容

#####方法

alert()  显示带有一段消息和一个确认按钮的警告框。 
blur()  把键盘焦点从顶层窗口移开
focus() 把键盘焦点给予一个窗口
close() 关闭浏览器窗口
open() 打开一个新的浏览器窗口或查找一个已命名的窗口
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框 
prompt() 显示可提示用户输入的对话框

应用

> #####实现子窗口向父窗口传值和父窗口向子窗口传值

父窗口代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>window对象测试</title>
</head>

<body>
<!--父窗口需要一个文本框来显示值 id 传给子窗口修改
需要显示子窗口界面，用ifram-->
<h1>父窗口展示区</h1>
<div id="div1"></div><br>

<input type="text" id = "win4"/>
<input type="button" value="修改子窗口2输出值" onclick="changeWindow3()"/><br>

<br>
<iframe src="02.html"></iframe><br>

<iframe src="03.html"></iframe>

<script type="text/javascript">

    function changeWindow3()
    {
        //获取文本框对象
        var text_father = document.getElementById("win4");
        //获取文本框的值
        var content = text_father.value;
        //获取子窗口
        //这里frames数组返回的是子窗口对象,按html文件的解析顺序依次排序
        var child = frames[1];
        //获取子窗口元素
        var text_child = child.document.getElementById("win3");
        //获取子窗口文本框
         text_child.value = content;
        //赋值
    }

</script>

</body>
</html>

子窗口1代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>子窗口</title>
</head>
<body>
<!--子窗口需要获取父窗口对象
需要一个按钮，用来执行函数
一个文本框，用来输入修改的值-->
<h2>子窗口1展示区</h2>
<input type="text" id="box">
<input type="button" onclick="changeValue()" value="修改父窗口输出值"/>
<script type="text/javascript">

    function changeValue()
    {
        //获取父窗口对象
        var fatherWindow = self.parent;

        //获取父窗口元素
        var father_input = fatherWindow.document.getElementById("div1");

        //获取子窗口元素
        var childBox = document.getElementById("box");

        //将子窗口文本框中的值赋值给父窗口div层中输出
        father_input.innerHTML = childBox.value;
    }

</script>

</body>
</html>

子窗口2代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--
子窗口2需要实现在父类窗口中按钮修改文本框的值来实现子窗口的文本框中的值发生变化
父窗口需要
按钮  用来执行修改的值的函数，将值传给子窗口
文本框 用来修改值

子窗口2需要
文本框用来显示父窗口修改的值
-->
<h2>子窗口2展示区</h2>
<input type="text" id="win3"/>
</body>
</html>

> #####父窗口点击按钮弹出新窗口,选定新窗口列表之后传值给原窗口输出

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>父窗口测试</title>
    <script type="text/javascript">
        //函数需要打开一个新窗口
        function selectVip()
        {
//            window.open(URL,name,features,replace)
//            window.open("http://www.baidu.com");
              window.open("openChild.html", "window4","width = 400px, height = 400px,left = 600px,top = 200");
        }
    </script>
</head>
<body>
<input type="text" id="typename">
<input type="button" onclick="selectVip()" value="请选择会员类型"/>
</body>
</html>

新窗口代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我是新窗口</title>
    <script type="text/javascript">

        //返传入当前元素对象
        function sendBack(obj)
        {
            //获取原窗口对象
            var father_opener = window.opener;
            //获取原窗口文本框元素对象
            var vip_type = father_opener.document.getElementById("typename");
            //获取当前窗口元素值并赋值给上一步
            alert(vip_type);
            vip_type.value = obj.value;
            //选择完成后需要关闭窗口
            self.close();
        }
        </script>
</head>
<body>
<!--首先要有单选列表-->
<input type="radio" value="金牌" onclick="sendBack(this)" name="typevip" />金牌<br>
<input type="radio" value="银牌" onclick="sendBack(this)" name="typevip" />银牌<br>
<input type="radio" value="铜牌" onclick="sendBack(this)" name="typevip" />铜牌<br>
<input type="radio" value="铁牌" onclick="sendBack(this)" name="typevip" />铁牌<br>
</body>
</html>

#####对话框的用法
- window.alert(String) 警告框
- Boolean window.confirm(String) 确认框
- String window.prompt(String) 提示输入框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对话框测试</title>
    <script type="text/javascript">

        function alertTest()
        {
            alert("警告！！")
        }
        //确认框返回布尔型
//        confirm(message) 在window上弹出的对话框中显示的纯文本（而非HTML文本）
        function confirmTest()
        {
            var ret = confirm("确定要关闭窗口？");
            if (ret==true)
            {
                self.close();
            }
        }
        //提示用户输入 返回string类型(当前显示的文本)
//        prompt(text,defaultText) 用于显示可提示用户进行输入的对话框
        function promptTest()
        {
            var idNumber = prompt("请输入你的身份证号码？", "1234567");
            if (idNumber != null)
            {
                alert(idNumber);
            }
        }
        </script>
</head>
<body>
<!--提供一个已经定好的弹窗和取消确认窗口而已,至于方法内容需要自己完成-->
<input type="button" onclick="alertTest()" value="警告框"><br>
<input type="button" onclick="confirmTest()" value="确认框"><br>
<input type="button" onclick="promptTest()" value="提示输入框"><br>

</body>
</html>

Charelesa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM Window

Window 对象属性- closed 返回窗口是否已被关闭- length 设置或返回窗口中的框架数量- opener 返回对用open方法打开当前窗口的那个窗口- parent 返回父窗口 - self 返回对当前窗口的引用 - top 返回最顶层的父辈窗口 - window window 属性等价于 self 属性，它包含了对窗口自身的引用 - window.frames 返回
复制链接

扫一扫