window对象学习

最新推荐文章于 2021-01-19 15:49:34 发布

阳光里的我们

最新推荐文章于 2021-01-19 15:49:34 发布

阅读量229

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js语法整理 window对象文章标签： window对象

本文链接：https://blog.youkuaiyun.com/weixin_44748596/article/details/94433998

js语法整理同时被 2 个专栏收录

8 篇文章

订阅专栏

window对象

2 篇文章

订阅专栏

本文深入探讨了JavaScript如何通过浏览器对象模型(BOM)与浏览器交互，包括使用window对象的各种方法和属性，如框体方法、定时器、子窗口操作、地址栏控制、历史记录导航及屏幕和浏览器配置信息的获取。

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

js语言运行在浏览器上面，所以就有可能调用一下浏览器自己写好的代码。浏览器是用代码开发的，所以js就有可能调用一下浏览器内部开发的结果，比如浏览器的历史记录，前进，后退，地址栏信息的改变。js动态改变地址栏里面的信息，或者获取地址栏里的信息，就需要调用浏览器封存好的调用方式
bom浏览器对象模型
——浏览器的内核语言支持规范
（bom是一个协议，具体实现是window对象，js是一门基于对象的语言，对js提供支持就需要用对象的形式来实现）

window对象

1，window对象的常用方法

1，框体方法
(1) window.alert()(警告框)

<head>
    <script>
         function a(){
            window.alert("我是警告框")
        }
    </script>
</head>

<body>
<input type="button" value="测试框体结构" onclick="a();"/><br><br>
</body>

(2) winow.confirm()(确认框)

<head>
    <script>
           function a(){
            window.confirm("确认要删除吗？");//带有确定和取消选项的确认框体（有返回值）
        }
    </script>
</head>

<body>
<input type="button" value="测试框体结构" onclick="a();"/><br><br>
</body>

(3) window.prompt()(提示框)

<head>
    <script>
           function a(){
      window.prompt("请输入账号：");//提示框,它是js提供的为数不多的收集用户信息的
        }
    </script>
</head>

<body>
<input type="button" value="测试框体结构" onclick="a();"/><br><br>
</body>

confirm和prompt都有返回值
confirm确认框点击确认返回true，点击取消返回false；
promp提示框默认返回空值，确认返回输入的文本值，点击取消返回null；

 function b(){
            var flag= window.confirm("确认要删除吗？");
            window.alert(flag)
        }
        function c(){
            var flag2=window.prompt("请输入用户名：");
            window.alert(flag2)
        }

<input type="button" value="测试confirm的返回值" onclick="b();"/><br><br>
<input type="button"  value="测试prompt的返回值" onclick="c();"/><br><br>

2，定时和间隔方法
（1）定时执行
window.setTimeout(function(){
},milliseconds)
相对应的关闭执行的方法：clearTimeout()

var id;
        function d(){
            id=window.setTimeout(function (){
                alert("我是定时执行");
            },3500)
        }
        function e(){
            clearTimeout(id)
        }

<input type="button" value="测试settimeout定时执行" onclick="d()"/><br><br>
<input type="button"  value="测试cleartimeout定时器的关闭" onclick="e();"/><br><br>

（2）间隔执行
window.setInterval(function(){
},milliseconds)
相对应的关闭方法clearInterval()

function f(){
    id2=window.setInterval(function (){
        alert("我是间隔执行");
    },1000)
}
        function g(){
            clearInterval(id2)
        }

<input type="button" value="测试setinterval间隔执行" onclick="f()"/><br><br>
<input type="button"  value="测试clearinterval间隔执行的关闭" onclick="g();"/><br><br>

3，子窗口方法
window.open()
window.close()
子窗口方法平时会出现在：支付成功，页面加载成功，用户信息的填写获取等
4，子页面调用父页面的函数
window.opener.父页面函数

//父页面
<script>
function h(){
            window.open('son页面.html','newwindow',
                    'height=400,width=600,top=100,left=350,' +
                    'toolbar=yes,menubar=yes,scrollbars=no,resizable=no,location=yes,status=yes');
        }
//      子页面调用父页面的函数
        function father(){
            alert("父页面")
        }
<script/>
<body>       
<input type="button"  value="测试子窗口" onclick="h();"/><br><br>
<body/>

window.open() 里面参数是打开一个新的窗口的配置信息：打开的浏览器的资源位置，新窗口， height,width,top，left，工具栏，菜单栏，滚动条，大小是否可变，地址栏，状态栏

//子页面
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试window.open()</title>
<style>
    p{
        text-align:center;
        top:300px;
        font-size:28px;
    }
    span{
        color:red;
        font-size:40px;
    }
</style>
    <script>
            function a(){
        var ospan=document.getElementById("ospan");
//                倒计时功能
            setInterval(function(){
                ospan.innerHTML=ospan.innerHTML-1;
                if(ospan.innerHTML==0){
//这个判断里面一般是用来跳转并刷新页面的
                    window.location.href="http://www.baidu.com"
 //self.close也可以关闭当前子页面，并不是必须配套window.open()使用的
                }
//if判断需要写在循环计时器（间隔计时）里面
            },1000);
//            console.log(typeof ospan.innerHTML);字符串类型的数字用“+”是字符串的拼接，“-”是数字的运算
        }
        function gofather(){
        window.opener.father();
//直接调用window.opener.father();会在body加载完后先跳转页面在运行倒计时函数，效果不太好，所以需要用函数封装
        }
    </script>
</head>
<body onload="a();">
<p>请稍等，<span id="ospan">5</span>s后开启游戏页面</p>
<button onclick="gofather();">调用父页面</button>
<!--按这个键调用函数gofather()跳转页面，甚至有时候会刷新相关页面-->
</body>
</html>

有时候我们在父页面会看到很多button，点击进去有小窗口会让用户填写相关信息，然后点击小窗口里面的确认等按键会提交用户信息并重新刷新页面
在父页面可以加提示语，或者可以重新请求加载父页面资源

2，window对象的常用属性

2.1，地址栏属性（location）

1， window.location.href="本地的相对路径或url"页面跳转属性
（1）获取跳转资源有三种方式：
直接在地址栏写路径；
超链接；
js操作location属性。
2， window.location.reload()重新加载属性
该属性调用了浏览器上面的重新加载图标的底层代码，一般用来做子页面进行用户信息输入后的重新加载资源效果

2.2，历史记录属性（history）

window.history.forward();前进属性
调用的是浏览器的前进图标的代码属性
window.history.backward();后退属性
window.history.go(index);
跳转到指定的历史记录资源,当前页面的index是0
window.

function j(){
            window.history.forward();
        }
function k(){
    window.history.back();
}
function l(){
            window.history.go(1)
        }

<input type="button"  value="测试历史记录前进属性" onclick="j();"/><br><br>
<input type="button"  value="测试历史记录后退属性" onclick="k();"/><br><br>
<input type="button"  value="测试历史记录跳转属性" onclick="l();"/><br><br>

2.3，屏幕属性（screen）

window.screen.width/height 指的是屏幕宽高的分辨率
window.screen.availWidth/availheight 指的是减去诸如窗口工具栏后的屏幕宽高分辨率

  function m(){
            var x=window.screen.width;
            var y=window.screen.height;
            var x2=window.screen.availWidth;
            var y2=window.screen.availHeight;
            document.write("width:"+x+","+"height:"+y+"<br>"
                    +"availwidth:"+x2+","+"availheight:"+y2);//谷歌1366  768  火狐1093  614
        }

<input type="button" value="测试屏幕宽高属性" onclick="m();"/><br><br>

2.4，浏览器配置属性（navigator）

window.navigator.userAgent

   function n(){
           document.write(window.navigator.userAgent)

2.5，主体面板属性（document）

主体面板属性请在下一篇《 window对象常用属性之主体面板属性》浏览，谢谢！

window对象学习

window对象

1，window对象的常用方法

2，window对象的常用属性

2.1， 地址栏属性（location）

2.2，历史记录属性（history）

2.3，屏幕属性（screen）

2.4，浏览器配置属性（navigator）

2.5，主体面板属性（document）

2.1，地址栏属性（location）