精华内容
下载资源
问答
  • 主要介绍了JS window对象简单操作,结合完整实例形式分析了JavaScript Window对象各种常见提示框、弹出窗口及时间相关操作技巧,需要的朋友可以参考下
  • JavaScript的document对象和window对象详解,js经常用得到的知识,了解下。
  • Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 注释:没有应用于 window ...
  • JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制。...除了window对象之外,其他的5个对象都是window对象的属性,它们的关系如下图: 一、window对象 window对象就是JavaScript
  • 参考资料:什么是document对象?什么是window对象?.pdf
  • js_Window对象及方法

    2013-12-30 16:17:09
    j s _ W i n d o w 对 象 及 方 法
  • 每一个Activity组件都有一个关联的ContextImpl对象,同时,它还关联有一个Window对象,用来描述一个具体的应用程序窗口。每一个Activity组件都有一个关联的ContextImpl对象,同时,它还关联有一个Window对象,用来...
  • 一文搞定JS中window对象

    千次阅读 2020-06-25 14:16:41
    1.window对象简介 2.窗口操作 3.对话框 4.定时器 5.location对象 6.navagator对象 7.document对象 1.window对象简介 1.在JavaScript中,一个浏览器窗口就是一个window对象。 2.一个窗口就是一个window对象,...

    1.window对象简介
    2.窗口操作
           
    打开窗口
           
    关闭窗口
    3.对话框
           
    alert()
           
    confirm()
           
    prompt()
    4.定时器
           
    setTimeout()和clearTimeout()
           
    setInterval()和clearInterval()
    5.location对象
           
    window.location.herf
           
    window.location.search
           
    window.location.hash
    6.navagator对象
    7.document对象

    在这里插入图片描述

    1.window对象简介

    1.在JavaScript中,一个浏览器窗口就是一个window对象。
    2.一个窗口就是一个window对象,这个窗口里面的HTML文档就是一个document对象,document对象是window对象的子对象。

    window对象的子对象分很多种:

    子对象说明
    document文档对象用于操作页面元素
    location地址对象用于操作URL地址
    navigator浏览器对象用于获取浏览器版本信息
    history历史对象用于操作浏览器历史
    screen屏幕对象用于操作屏幕的高度和宽度

    在这里插入图片描述

    一个窗口是一个window对象,这个窗口里边的HTML文件是一个document对象,window对象众多的子对象由于都是操作窗口的,所以又被称为BOM对象模型(浏览器对象模型)

    当然我们可以吧window下的所有子对象看成他的他的属性,只不过属性也是一个对象而已。其实window也有很多常用的方法:

    方法说明
    alert()提示一个对话框
    confirm()判断对话框
    prompt()输入对话框
    open()打开窗口
    close()关闭窗口
    setTimeout()打开一次性定时器
    clearTimeout()关闭一次性定时器
    setInterval()开启重复性定时器
    clearInterval()关闭重复性定时器

    对于window对象无论是属性还是方法都可以省略window前缀,如window.alert()可以简写成alert()

    2.窗口操作

    2.1打开窗口

    语法:window.open(url, target)
    url表示新窗口的地址,若为空那么打开一个空白窗口
    target表示打开方式默认为_blank表示在新的窗口打开,_self表示在当前窗口打开

    例子1:打开一个新的窗口

    在这里插入图片描述例子2:打开空白窗口
    在这里插入图片描述

    按下按钮按钮后:
    在这里插入图片描述
    var opener = window.open();这里的open像函数调用一样会返回一个新窗口的windows对象,也就是说opener就是这个新窗口的window对象

    例子3:往空白窗户输出一个页面

    在这里插入图片描述
    点击按钮后
    在这里插入图片描述
    例子4:操作空白窗口中的元素

    在这里插入图片描述
    当我们点击打开新的窗口后:
    在这里插入图片描述
    当我们在按下操作新的窗口后;
    在这里插入图片描述

    2.2关闭窗口

    例子1:关闭窗口(关闭当前窗口)

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script>
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function () {
                    window.close();
                };
            }
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="关闭" />
    </body>
    </html>
    

    例子2:关闭新窗口

    在这里插入图片描述

    3.对话框

    3.1alert()

    老朋友了,不用过多介绍,我们只需要知道在alert里边实现换行用\n

    3.2confirm()

    confirm()不仅提示文字还提示还提供确认,当用户点击确认后confirm会返回true,点击取消会返回false

    例子:
    在这里插入图片描述

    点击按钮后
    在这里插入图片描述

    3.3prompt()

    prompt不仅提示文字,还会返回一个字符串

    例子:
    在这里插入图片描述点击按钮后:
    在这里插入图片描述
    在这里插入图片描述

    4.定时器

    4.1setTimeout()和clearTimeout()

    所谓的定时器就是每隔一段事件执行一段代码
    语法1:setTimeout(code,time);
    code:可以是一段代码可以是一个函数名
    time:是时间单位为毫秒,表示要过多长时间执行code里边的代码
    语法2:clearTimeout():暂停计时器

    例子1:code里边是一段代码

    在这里插入图片描述
    例子2:code里边是一段函数

    在这里插入图片描述
    例子3:code里边是一个函数名

    在这里插入图片描述
    例子4:clearTimeout()的使用

    在这里插入图片描述点击按钮后两秒弹出对话框,如果两秒再次点击暂停按钮就不会弹出对话框

    4.2setInterval()和clearInterval()

    语法1:setInterval(code,time):重复性的执行一段代码
    参数code:可以是一段代码,可以是一个函数,也可以是一个函数名
    参数time:是时间,单位为毫秒表示要过多长时间才执行code里边的代码
    语法虽然和setTimeout()语法一样,但是不同的是setTimeout()只是执行一次,然而setInterval()执行无数次
    语法2:clearInterval(obj):取消setInterval()的执行
    obj是setInterval()方法返回的对象

    例子1:倒计时效果(可以自己运行看看效果)

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script>
            //定义全局变量,用于记录秒数
            var n = 5;
            window.onload = function () {
                //设置定时器,重复执行函数countDown
                setInterval(countDown, 1000);
            }
            //定义函数
            function countDown() {
                //判断n是否大于0,因为倒计时不可能有负数
                if (n > 0) {
                    n--;
                    document.getElementById("num").innerHTML = n;
                }
            }
        </script>
    </head>
    <body>
        <p>倒计时:<span id="num">5</span></p>
    </body>
    </html>	
    

    例子2:clearInterval()的使用

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            div{width:100px;height:100px;border:1px solid silver;}
        </style>
        <script>
            window.onload = function () {
                //获取元素
                var oBtn = document.getElementsByTagName("input");
                var oDiv = document.getElementsByTagName("div")[0];
    
                //定义一个数组colors,存放6种颜色
                var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
                //timer用于存放定时器
                var timer = null;
                //i用于计数
                var i = 0;
    
                //“开始”按钮
                oBtn[0].onclick = function () {
                    //每次点击“开始”按钮,一开始就清除一次定时器
                    clearInterval(timer);
                    //每隔1秒切换一次背景颜色
                    timer = setInterval(function () {
                        oDiv.style.backgroundColor = colors[i];
                        i++;
                        i = i % colors.length;
                    }, 1000);
                };
                //“暂停”按钮
                oBtn[1].onclick = function () {
                    clearInterval(timer);
                };
            }
        </script>
    </head>
    <body>
        <input type="button" value="开始"/>
        <input type="button" value="暂停"/>
        <div></div>
    </body>
    </html>
    

    这段代码div元素会每隔1秒换一种背景颜色

    5.location对象

    5.1location对象简介

    我们可以使用window对象下的location子对象来操作当前窗口的URL
    URL指的是页面地址

    location的三个属性
    在这里插入图片描述

    5.2window.location.herf

    window.location.herf:获取或者设置当前页面的地址

    例子1:获取当前页面的地址
    在这里插入图片描述
    例子2:设置当前页面地址

    在这里插入图片描述

    5.3window.location.search

    window.location.search:获取当前页面地址“?”后面的内容

    例子:

    在这里插入图片描述(如果页面是空白的那么需要我们手动在浏览器地址后边输入?+查询字符串),?后边的查询字符串,一般用于数据库查询

    5.4window.location.hash

    window.location.hash:来获取和设置当前页面地址#后边的内容,一般用于描点连接

    在这里插入图片描述

    6.navigator对象

    navigator对象获取浏览器类型
    语法:window.navigator.userAgent

    例子:
    在这里插入图片描述

    7.document对象

    7.1document对象简介

    document对象其实是window对象下的一个子对象,它操作的是HTML文档,实际上,浏览器每打开一个窗口生成一个window对象,并且窗口内部的的页面会自动生成一个document对象,我们可以通过这个document对象来操作页面中的所有元素

    7.2document对象属性

    document对象常用的方法:

    方法名说明
    document.getElementByld()通过id获取元素
    document.getElementsByTagName()通过标签获取元素
    document.getElementsByClassName()通过class获取元素
    document.getElementsByName()获取name元素
    document.querySelector()通过选择器获取元素,只获取第一个
    document.querySelectorAll()通过选择器获取元素,获取所有
    document.createElement()创建元素节点
    document.createTextNode()创建文本节点
    document.write()输出内容
    document.writeIn()输出内容并换行
    7.3document.write()和document.writeln()

    document.writeln()就比document.write()多一个换行

    展开全文
  • 浏览器中常用内置对象之Window引言正文一、Window对象的方法(1)计时器(2)打开窗口和关闭窗口二、Window对象的属性 引言 我们从这一篇开始逐个讲解浏览器上的内置对象的属性和方法。常见的浏览器内置对象有:...

    浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Window对象的属性与方法

    引言

    浏览器为我们提供了JavaScript运行的环境,同时也给我们提供了很多的对象,我们从这一篇开始逐个讲解浏览器上的内置对象的属性和方法。常见的浏览器内置对象有:Window 、Location 、Navigator 、History 、Screen……
    本篇文章,我们就从最大的对象Window开始讲起,在本文的最后还附带讲述其它几个对象的文章链接

    • 公众号:前端印象
    • 不定时有送书活动,记得关注~
    • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

    正文

    Window对象在客户端JavaScript中扮演着核心的角色,它是客户端的一个全局内置对象。我们可以使用 window 来引用这个对象,比如当我们打开一个网页,window 就代表这个网页;如果打开多个页面,则他们都有各自的 window 且互不相同。

    一、Window对象的方法

    (1)计时器

    我们一定见过这样两个函数,setTimeout()setInterval(),它们就是我们常说到计时器函数。其实这两个函数是被定义在客户端的一个全局函数,所以也可以理解为就是Window对象的一个方法,所以我们可以这样引用 window.setTimeout(),当然也可以省略 window,直接 setTimeout()

    那么setTimeout()setInterval()这两个函数是干什么的呢?简单点来说就是在指定时间之后调用设定的函数,前者是调用一次,后者是反复不停地调用。

    • setTimeout()

    该函数需要传入两个参数,第一个参数是一个函数,在指定时间之后执行该函数;第二个参数是时间,单位为毫秒

    //创建了一个定时器,1秒后会打印 `执行了一次`
    setTimeout(function() {
    	console.log('执行了一次')
    },1000)
    
    //执行了一次
    

    我们可以看到,传入的函数只执行了一次

    • setInterval()

    该函数也需要传入两个参数,第一个参数是一个函数,在指定时间之后执行该函数;第二个参数是时间,单位为毫秒

    //创建了一个定时器,每过1秒后都会打印 `执行了一次`
    setInterval(function() {
    	console.log('执行了一次')
    },1000)
    
    //执行了一次
    //执行了一次
    //执行了一次
    //  …………
    

    我们可以看到,传入的函数一直在执行,因为这个函数作用就是在指定时间后反复执行。那如何让它停止呢?其实还有两个函数是专门用来清除定时器的,那就是 clearTimeout()clearInterval()

    • clearTimeout() 和 clearInterval()

    看这两个函数的名字我们就知道是用来清除定时器的,那么如何使用呢?我们只需在创建定时器的时候,将定时器返回给一个变量,再将该变量传入clearTimeout()clearInterval() 就可以清除对应的定时器啦。

    我们就拿其中一个函数来举个例子吧

    let count = 0
    let timer = setInterval(function() {
    				count ++
    				console.log('执行了' + count + '次')
    				if(count === 5) {
    					clearInterval(timer)
    				}
    			
    			},1000)
    
    //执行了1次
    //执行了2次
    //执行了3次
    //执行了4次
    //执行了5次
    

    上述例子创建了一个反复调用的定时器,并返回给变量timer,每过1秒,变量count + 1 ,并打印一次,同时判断count是否等于5,如果等于5,就调用clearInterval() 函数,并把变量timer作为参数,用于清除这个设定的定时器。所以本应该反复无限执行的定时器,在执行了5次以后就被清除掉了。

    补充:定时器的执行是一种异步操作,也就是说它不会阻塞接下来的代码执行,我们来看一个例子

    setTimeout(function() {
    	console.log('内部已执行')
    },1000)
    console.log('外部已执行')
    
    //外部已执行
    //内部已执行
    

    我们可以看到,从上到下解析下来,先执行了最后一行的代码,再执行了定时器传入的函数。这就是因为定时器是一种异步操作,所以我们来看一种特殊的情况,这个一定要注意了

    setTimeout(function() {
    	console.log('内部已执行')
    },0)
    console.log('外部已执行')
    
    //外部已执行
    //内部已执行
    

    我们可以看到,虽然我们指定的时间是0秒,但仍然是先执行了最后一行的代码,再执行了定时器传入的函数。

    (2)打开窗口

    Window对象有一个 open() 方法,该方法可以打开一个新的浏览器窗口,并返回打开那个窗口的Window对象。

    open() 方法共有4个可选的参数:

    1. 第一个参数是即将打开的新窗口的URL,若没有该参数,则打开一个空白页

    2. 第二个参数是即将打开的新窗口的名字。若没有该参数,则会使用指定的名字 _blank 打开一个新的 、未命名的窗口

    3. 第三个参数是一个字符串,字符串里是 属性名1=值1, 属性名2=值2 这样的形式,用来设置新打开窗口的一些状态样式。

    4. 第四个参数是在第二个参数设置为一个已存在的窗口名时才生效,该参数为布尔值,当为true时,第一个参数的URL会替换掉窗口浏览历史的当前条目;当为false时,会在窗口浏览历史中创建一个新的条目

    接下来我们来讲解这四个参数是如何使用的:

    • 第一个参数

    这个参数很好理解,比如我们传入 http://www.baidu.com ,则会跳转到百度页面,如果我们省略这个参数,则会打开一个空白页,如下图。
    在这里插入图片描述

    • 第二个参数

    这个参数是为我们打开的新窗口命名的。例如,我们设置该参数为 newWindow,第一次调用 open() 函数,会去查看当前浏览器是否有一个窗口名字叫做newWindow,若没有则会打开一个名为 newWindow 的窗口,那当我们第二次调用 open() 函数时,同样也会去查看当前浏览器是否有一个窗口名字叫做newWindow,因为第一次调用的时候打开了一个这样的窗口,所以我们浏览器只是会跳转到刚刚打开的那个页面。

    我们来看一下例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn">调用open函数</button>
    <script>
        let btn = document.querySelector('.btn')
        btn.onclick = function () {
        	//打开一个空白窗口,并命名为newWindow
            window.open('', 'newWindow')
        }
    </script>
    </body>
    </html>
    

    动图展示
    在这里插入图片描述

    • 第三个参数

    该参数是是一个字符串,字符串里是 属性名1=值1, 属性名2=值2 这样的形用于设置新打开的窗口的一些样式的,比如窗口大小 、是否具有菜单栏 、状态栏 、工具栏等

    我们来看一个简单的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn">调用open函数</button>
    <script>
        let btn = document.querySelector('.btn')
        btn.onclick = function () {
        	//打开一个没有名字的空白窗口,窗口大小为400 * 350
            window.open('', '', 'width=400, height=350')
        }
    </script>
    </body>
    </html>
    

    动图展示
    在这里插入图片描述
    还有很多属性可以设置,我直接列出来一些常用的属性,大家可以自行测试

    属性名含义
    height窗口的高度,最小值为100
    width窗口的宽度,最小值为100
    toolbar表示是否显示窗口的工具栏。yes/no,默认为yes
    status是否要添加一个状态栏。yes/no,默认为yes
    scrollbars是否显示滚动条。yes/no,默认为yes
    resizable是否可调整窗口大小。yes/no,默认为yes
    menubar是否显示菜单栏。yes/no,默认为yes
    location是否显示地址字段。yes/no,默认为yes

    还有一些值,如果大家感兴趣可以去自己查询一下。

    • 第四个参数

    这个参数我暂时是没有看出有什么实际的用处,如果大家有知道的可以评论区告诉我。

    我们在刚开始说过,window.open() 会返回打开那个窗口的Window对象,这就意味着我们可以控制那个打开的窗口,比如这样

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn1">打开新窗口</button>
    <button class="btn2">控制新打开的窗口</button>
    <script>
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let new_window = null
        btn1.onclick = function () {
        	//将新打开的窗口的window对象返回给变量new_window
            new_window = window.open()
        }
        btn2.onclick = function () {
        	//在原窗口控制新打开的窗口弹出弹框
            new_window.alert('弹出弹窗')
        }
    
    </script>
    </body>
    </html>
    

    动画展示
    在这里插入图片描述

    (3)关闭窗口

    既然window对象有打开窗口的函数,那肯定少不了关闭窗口的函数,我们可以通过 window对象.close() 的方式,关闭一个窗口,大多数的浏览器只允许关闭由自己的js代码打开的窗口

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn1">打开新窗口</button>
    <button class="btn2">关闭新打开的窗口</button>
    <script>
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        btn1.onclick = function () {
        	//将新打开的窗口的window对象返回给变量new_window
            new_window = window.open()
        }
        btn2.onclick = function () {
        	//调用新打开窗口的window对象的close()方法
            new_window.close()
        }
    
    </script>
    </body>
    </html>
    

    动画展示
    在这里插入图片描述

    (4)对话框

    Window对象还提供了3个方法来向用户显示简单的对话框,他们分别是:alert()confirm()prompt()

    • alert()

    该方法传入一个字符串作为参数。执行时,在浏览器弹出一个消息提醒框,字符串会作为内容显示在框内。

    执行了该方法以后,会阻碍后面的js代码的运行,只有等用户手动关闭了该弹框以后,后面的js代码才会继续执行。

    这个是Window对象的方法,可以这样调用window.alert(),同时我们也可以省略window,直接这样写alert()

    alert('第一次弹出弹框')
    window.alert('第二次弹出弹框')
    

    动画展示

    在这里插入图片描述

    • confirm()

    该方法传入一个字符串作为参数。执行时,弹出一个消息框,字符串作为内容展示在框内,并且有 “确认” 和 “取消” 两个按钮,当点击 “确认” 时,返回true;当点击 “取消” 时,返回false。

    执行了该方法以后,会阻碍后面的js代码的运行,只有等用户点击了某个按钮以后,后面的js代码才会继续执行。

    调用该方法,window 可以省略,即可以这样调用 confirm()

    let ret1 = confirm('你确定吗?')
    console.log(ret1, 1)
    
    let ret2 = window.confirm('真的确定吗?')
    console.log(ret2, 2)
    

    动画展示
    在这里插入图片描述

    • prompt()

    该方法传入一个字符串作为参数。执行时,弹出一个框,字符串作为内容展示在框内,并且框内还有一个文本框,用户可以在文本框内输入内容。同时也有 “确定” 和 “取消” 两个按钮,若点 “确定”,则返回用户文本框内输入的字符串;若点 “取消”,则返回null

    执行了该方法以后,会阻碍后面的js代码的运行,只有等用户点击了某个按钮以后,后面的js代码才会继续执行。

    调用该方法,window 也可以省略,即可以这样调用 prompt()

    let ret1 = prompt('你是谁?')
    console.log(ret1, 1)
    
    let ret2 = window.prompt('你吃饭了吗?')
    console.log(ret2, 2)
    

    动画展示
    在这里插入图片描述

    其实除了这三种简单的对话框外,还有一种复杂的对话框,叫做模态对话框,调用方法为showModalDialog(),它的实质就是将另一个HTML文件作为弹框显示在页面中,因为比较复杂,用到的也不多,我就不多做讲解了,感兴趣的可以去网上自己看下文档。

    二、Window对象的属性

    要是说到Window对象的属性的话,那可就多了,我们先来讲一个常用的,例如opener ,该属性返回一个window对象,表示该窗口是由谁打开的。若不是被别的窗口打开,则返回null;若是被别的窗口打开,则返回那个窗口的window对象。 刚刚我们上面将了window对象的open()方法,并且知道了open()方法会返回新打开窗口的window对象。接下来我们来看一下例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button class="btn1">打开新窗口</button>
    <button class="btn2">控制新打开的窗口</button>
    <script>
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let new_window = null
        //弹出弹框,展示当前窗口的opener属性
        alert(window.opener)
        btn1.onclick = function () {
            new_window = window.open()
        }
        btn2.onclick = function () {
        	//控制新窗口弹出弹框,判断新打开窗口的opener是否为当前窗口的window对象
            new_window.alert(new_window.opener === window)
        }
    
    </script>
    </body>
    </html>
    

    动画展示
    在这里插入图片描述

    还有更多的window对象属性,其实都是通过调用了别的对象的属性来引用的,因为window对象表示的整个窗口,所以window对象是最大的一个对象,在他里面还有很多别的对象,我们可以通过window.别的浏览器内置对象来引用别的对象属性。举个例子先location.href就是调用了Location对象,同时我们也可以这样调用Location对象 window.location,这两者相等。

    所以在这里,我列举出一些浏览器中常用的其他内置对象,之后我会针对每个对象写一篇博客对其进行讲解,并在本文放上那篇博客的链接,供大家观看。

    • Location对象

    博客链接:浏览器中内置对象Location属性与方法详解

    • History对象

    博客链接:浏览器中内置对象History属性与方法详解

    • Navigator对象

    博客链接:浏览器中内置对象Navigator和对象Screen的简单了解

    • Screen对象

    博客链接:浏览器中内置对象Navigator和对象Screen的简单了解

    结束语

    各位如果有什么要补充的,欢迎在评论区留言。大家点个收藏,关注浏览器别的内置对象的讲解。

    展开全文
  • JavaScript浏览器对象之window对象详解

    千次阅读 2019-05-06 18:04:20
    1 window对象概述 2 window对象的属性 2.1 window.name属性 2.2 window.innerHeight属性,window.innerWidth属性 2.3 window.pageXOffset属性,window.pageYOffset属性 2.4 iframe元素 2.5 Navigator对象 ...

    目录

    1 window对象概述

    2 window对象的属性

    2.1 window.name属性

    2.2 window.innerHeight属性,window.innerWidth属性

    2.3 window.pageXOffset属性,window.pageYOffset属性

    2.4 iframe元素

    2.5.1 Navigator.userAgent属性

    2.5.2 navigator.plugins属性

    2.6 screen对象

    3 window对象的方法

    3.1 URL的编码/解码方法

    3.2 window.getComputedStyle方法

    3.3 window.matchMedia方法

    4 window对象的事件

    4.1 window.onerror

    5 alert(),prompt(),confirm()


    1 window对象概述

    JavaScript的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为“顶层对象”。这就是说,JavaScript的所有对象,都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”,在浏览器环境中,这个顶层对象就是window对象(w为小写)。

    所有浏览器环境的全局变量,都是window对象的属性。

    var a = 1;
    window.a // 1
    

    可以简单理解成,window就是指当前的浏览器窗口。

    只要指定某个window或帧框(frame)的名字,就可以从这个全局对象读取该窗口的全局变量。比如,某个文档存在一个全局变量x,就可以从iframe的parent.x读取该全局变量。

    2 window对象的属性

    属性说明
    document对话框中显示的当前的文档
    frames表示当前对话框中所有frame对象的集合
    location指定当前文档的URL
    name对话框的名字
    status状态栏中的当前信息
    defaultstatus状态栏的默认信息
    top表示最顶层的浏览器对话框
    parent表示包含当前对话框的父对话框
    opener表示打开当前对话框的父对话框
    closed表示当前对话框是否关闭的逻辑值
    self表示当前对话框
    screen表示用户屏幕,提供屏幕尺寸,颜色深度等信息
    navigator表示浏览器对象,用于获得与浏览器相关的信息

    通过浏览器的document.compatMode属性确定浏览器对CSS渲染技术的支持:当前主流浏览器都使用Quirks模式和标准模式对页面做不同的处理,通过读取document.compatMode属性的值确定是哪种模式,如果是标准模式返回:CSSICompat,如果使用的Quirks模式,返回的是:BackCompat(但是Opera赋值为QuirksMode),因此一般检测标准模式就可以了

    2.1 window.name属性

    window.name属性用于设置当前浏览器窗口的名字。它有一个特点就是浏览器刷新后,该属性保持不变。所以,可以把值存放在该属性内,然后跨页面、甚至跨域名使用。当然,这个值有可能被其他网站的页面改写。

    window.name = "Hello World!";
    console.log(window.name);
    

    各个浏览器对这个值的储存容量有所不同,但是一般来说,可以高达几MB。

    该属性只能保存字符串,且当浏览器窗口关闭后,所保存的值就会消失。因此局限性比较大,但是与iFrame窗口通信时,非常有用

    2.2 window.innerHeight属性,window.innerWidth属性

    这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度,单位为像素。很显然,当用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。

    注意,这两个属性值包括滚动条的高度和宽度。

    2.3 window.pageXOffset属性,window.pageYOffset属性

    window.pageXOffset属性返回页面的水平滚动距离,window.pageYOffset属性返回页面的垂直滚动距离。这两个属性的单位为像素。

    2.4 iframe元素

    window.frames返回一个类似数组的对象,成员为页面内的所有框架,包括frame元素和iframe元素。需要注意的是,window.frames的每个成员对应的是框架内的窗口(即框架的window对象),获取每个框架的DOM树,需要使用window.frames[0].document

    var iframe = window.getElementsByTagName("iframe")[0];
    var iframe_title = iframe.contentWindow.title;
    

    上面代码用于获取框架页面的标题。

    iframe元素遵守同源政策,只有当父页面与框架页面来自同一个域名,两者之间才可以用脚本通信,否则只有使用window.postMessage方法。

    在iframe框架内部,使用window.parent指向父页面。

    Window对象的Navigator属性,指向一个包含浏览器相关信息的对象

    属性说明(这些属性可能对不同的浏览器有不同的支持
    appName返回浏览器的名称
    appVersion返回浏览器的版本号
    userAgent返回浏览器用于HTTP请求的用户代理头的值
    appCodeName返回浏览器的名称
    platform返回运行浏览器的操作系统或硬件平台
    cookieEnable检测浏览器是否支持Cookie。该属性值为Boolean,如果支持Cookie,返回true,否则返回false
    systemLanguage返回操作系统使用的默认语言,该属性值为字符串
    userLanguage返回用户使用的语言,概述性为字符串
    language返回浏览器中使用的默认语言
    mimeType返回一个数组,该数组中的元素代表浏览器支持的mime类型
    plugins返回一个数组,该数组中的元素代表浏览器已经安装的插件

    2.5.1 Navigator.userAgent属性

    Navigator.userAgent属性返回浏览器的User-Agent字符串,用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。

    navigator.userAgent
    // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"
    

    通过userAgent属性识别浏览器,不是一个好办法。因为必须考虑所有的情况(不同的浏览器,不同的版本),非常麻烦,而且无法保证未来的适用性,更何况各种上网设备层出不穷,难以穷尽。所以,现在一般不再识别浏览器了,而是使用“功能识别”方法,即逐一测试当前浏览器是否支持要用到的JavaScript功能。

    不过,通过userAgent可以大致准确地识别手机浏览器,方法就是测试是否包含“mobi”字符串。

    var ua = navigator.userAgent.toLowerCase();
    
    if (/mobi/i.test(ua)) {
        // 手机浏览器
    } else {
        // 非手机浏览器
    }
    

    如果想要识别所有移动设备的浏览器,可以测试更多的特征字符串。

    /mobi|android|touch|mini/i.test(ua)
    

    2.5.2 navigator.plugins属性

    navigator.plugins属性返回一个类似数组的对象,成员是浏览器安装的插件,比如Flash、ActiveX等。

    2.6 screen对象

    screen对象包含了显示设备的信息。

    // 显示设备的高度,单位为像素
    screen.height
    // 1920
    
    // 显示设备的宽度,单位为像素
    screen.width
    // 1080
    

    一般使用以上两个属性,了解设备的分辨率。上面代码显示,某设备的分辨率是1920x1080。

    除非调整显示器的分辨率,否则这两个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率。

    下面是根据屏幕分辨率,将用户导向不同网页的代码。

    if ((screen.width<=800) && (screen.height<=600)) {
        window.location.replace('small.html');
    } else {
        window.location.replace('wide.html');
    }
    

    3 window对象的方法

    方法说明
    alert()弹出一个警告对话框
    confirm()在确认对话框中显示指定的字符串
    prompt()弹出一个提示对话框
    open()打开新浏览器对话框,并且显示有URL或名字引用的文档,并设置创建对话框的属性
    close()关闭被引用的对话框
    focus()将被引用的的对话框放在所有打开对话框的前面
    blur()将被引用的的对话框放在所有打开对话框的后面
    scrollTo(x,y)把对话框滚动到指定的坐标
    scrollBy(x,y)按照指定的位移量滚动对话框
    setTimeout(timer)在指定毫秒后,对传递的表达式求值
    setInterval(interval)指定周期性执行代码
    moveTo(x,y)将对话框移动到指定坐标处
    moveBy(offsetx,offsety)将对话框移动到指定的位移量处
    resizeTo(x,y)设置对话框大小
    resizeBy(offsetx,offsety)按照指定的位移量设置对话框的大小
    print()相当于浏览器工具栏中“打印”按钮
    status()状态条,位于对话框下部的信息条,用于任何时间内信息的提示(有些浏览器不支持)
    defaultstatus()状态条,位于对话框下部的信息条,用于某个事件发生时的信息的提示(有些浏览器不支持)

    3.1 URL的编码/解码方法

    JavaScript提供四个URL的编码/解码方法。

    • decodeURI()
    • decodeURIComponent()
    • encodeURI()
    • encodeURIComponent()

    3.2 window.getComputedStyle方法

    getComputedStyle方法接受一个HTML元素作为参数,返回一个包含该HTML元素的最终样式信息的对象。

    3.3 window.matchMedia方法

    window.matchMedia方法用来检查CSS的mediaQuery语句。

    4 window对象的事件

    事件说明
    onfocus当浏览器窗口获得焦点时激活
    onblur当浏览器窗口失去焦点时激活
    onload当文档完全载入窗口时触发,但需注意,事件并非总是完全同步
    onunload当文档未载入时触发
    onresize当用户改变窗口大小时触发
    onerror当出现JavaScript错误时,触发一个错误处理事件
    onafterprint窗口被打印后触发
    onbeforeprint窗口被打印或被打印预览之前激活
    onbeforeunload窗口未被载入之前触发,发生于onunload事件之前
    ondragdrop文档被拖到窗口上时触发(仅用于netspace)
    onhelp当帮助键(通常是F1)被按下时触发
    onresizeend调整大小的进程结束时激活。通常是用户停止拖拽浏览器窗口边角时激活
    onresizestart调整大小的进程开始时激活。通常是用户开始拖拽浏览器窗口边角时激活
    onscroll滚动条往任意方向滚动时触发

    4.1 window.onerror

    浏览器脚本发生错误时,会触发window对象的error事件。我们可以通过window.onerror属性对该事件指定回调函数。

    window.onerror = function (message, filename, lineno, colno, error) {
        console.log("出错了!--> %s", error.stack);
    };
    

    error事件的回调函数,一共可以有五个参数,它们的含义依次如下。

    • 出错信息
    • 出错脚本的网址
    • 行号
    • 列号
    • 错误对象

    老式浏览器只支持前三个参数。

    需要注意的是,如果脚本网址与网页网址不在同一个域(比如使用了CDN),浏览器根本不会提供详细的出错信息,只会提示出错,错误类型是“Script error.”,行号为0,其他信息都没有。这是浏览器防止向外部脚本泄漏信息。一个解决方法是在脚本所在的服务器,设置Access-Control-Allow-Origin的HTTP头信息。

    Access-Control-Allow-Origin:*
    

    然后,在网页的script标签中设置crossorigin属性。

    <script crossorigin="anonymous" src="//example.com/file.js"></script>
    

    上面代码的crossorigin="anonymous"表示,读取文件不需要身份信息,即不需要cookie和HTTP认证信息。如果设为crossorigin="use-credentials",就表示浏览器会上传cookie和HTTP认证信息,同时还需要服务器端打开HTTP头信息Access-Control-Allow-Credentials。

    并不是所有的错误,都会触发JavaScript的error事件(即让JavaScript报错),只限于以下三类事件:

    • JavaScript语言错误
    • JavaScript脚本文件不存在
    • 图像文件不存在

    以下两类事件不会触发JavaScript的error事件。

    • CSS文件不存在
    • iframe文件不存在

    5 alert(),prompt(),confirm()

    alert()、prompt()、confirm()都是浏览器用来与用户互动的方法。它们会弹出不同的对话框,要求用户做出回应。

    需要注意的是,alert()、prompt()、confirm()这三个方法弹出的对话框,都是浏览器统一规定的式样,是无法定制的。

    alert方法弹出的对话框,只有一个“确定”按钮,往往用来通知用户某些信息

    // 格式
    alert(message);
    
    // 实例
    alert("Hello World");
    

    用户只有点击“确定”按钮,对话框才会消失。在对话框弹出期间,浏览器窗口处于冻结状态,如果不点“确定”按钮,用户什么也干不了。

    prompt方法弹出的对话框,在提示文字的下方,还有一个输入框,要求用户输入信息,并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。

    // 格式
    var result = prompt(text[, default]);
    
    // 实例
    var result = prompt('您的年龄?', 25)
    

    上面代码会跳出一个对话框,文字提示为“您的年龄?”,要求用户在对话框中输入自己的年龄(默认显示25)。

    prompt方法的返回值是一个字符串(有可能为空)或者null,具体分成三种情况:

    1. 用户输入信息,并点击“确定”,则用户输入的信息就是返回值
    2. 用户没有输入信息,直接点击“确定”,则输入框的默认值就是返回值。
    3. 用户点击了“取消”(或者按了Escape按钮),则返回值是null。

    prompt方法的第二个参数是可选的,但是如果不提供的话,IE浏览器会在输入框中显示undefined,Chrome会返回空字符串""。因此,最好总是提供第二个参数,作为输入框的默认值。

    confirm方法弹出的对话框,除了提示信息之外,只有“确定”和“取消”两个按钮,往往用来征询用户的意见。

    // 格式
    var result = confirm(message);
    
    // 实例
    var result = confirm("你最近好吗?");
    

    上面代码弹出一个对话框,上面只有一行文字“你最近好吗?”,用户选择点击“确定”或“取消”。

    confirm方法返回一个布尔值,如果用户点击“确定”,则返回true;如果用户点击“取消”,则返回false。

     

    展开全文
  • js的window对象与属性的使用

    万次阅读 2018-11-23 06:11:36
     浏览器对象:window对象。  Window 对象会在 &lt;body&gt; 或 &lt;frameset&gt; 每次出现时被自动创建。 2. window对象 window对象是BOM中所有对象的核心。BOM Browser Object Model 3.window...

    1.BOM的概述
        browser object modal :浏览器对象模型。
        浏览器对象:window对象。
        Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

    2. window对象

    window对象是BOM中所有对象的核心。BOM    Browser  Object Model

    3.window对象的属性

    window.open(), (打开窗口)
    window.close(), (关闭一个窗口)
    window.self()(窗口本身)  
    window.focus()(使当前的窗口在所有窗口之前. )
    window.status=”内容” (js中状态栏显示内容:)
    window.navigate(”http://www.google.com”); (js中的窗口重定向:)
    window.print() (js中的打印:)
    window.prompt(”message”,”defaultreply”); (js中的提示输入框:)
    window.scroll(x,y) (js中的窗口滚动条)
    window.scrollby(js中的窗口滚动到位置:)
    window.history.back()返回上一页
    window.history.forward()返回下一页,
    window.history.go(返回第几页,也可以使用访问过的url) 如果是0那么就是刷新
    history.length 
    window.createElement
    

    1.(位置类型-获得浏览器的位置)
    IE:
    window.screenLeft
    可以获得浏览器距屏幕左上角的左边距  
    window.screenTop
    可以获得浏览器距屏幕左上角的上边距

     FF:  
    alert(screenX)  
    alert(screenY)

    //IE
    左边距
    alert(screenLeft)
    上边距
    alert(screenTop)
    
    //FF
    左边距
    alert(screenX)
    上边距
    alert(screenY)

    (获得浏览器的尺寸)

    FF:window.innerWidth  获得窗口的宽度
    window.innerHeight  获得窗口的高度

    //FF:
    alert(window.innerWidth);
    alert(window.innerHeight);
    //IE:
    alert(document.documentElement.clientWidth)
    alert(document.documentElement.clientHeight)
    

    2.窗体控制

    screen对象记录了客户端显示屏的信息

    a.属性

    availHeight   返回显示屏幕的高度 (除 Windows 任务栏之外)。

    availWidth    返回显示屏幕的宽度 (除 Windows 任务栏之外)。

    height       返回显示屏幕的高度。

    width        返回显示屏幕的宽度。

    <script>
      document.write(screen.availHeight)
      document.write("<br/>")
      document.write(screen.height)
       document.write("<hr/>")
      document.write(screen.availWidth)
       document.write("<br/>")
      document.write(screen.width)
    </script>

    b.方法

    对窗体的移动,window.moveBy(x,y)  相对于当前位置沿着X\Y轴移动指定的像素,如负数是反方向。moveTo(x,y)  相对于浏览器的左上角沿着X\Y轴移动到指定的像素,如负数是反方向。

    窗体尺寸的改变,resizeBy(x,y)  相对于当前窗体的大小,调整宽度和高度。resizeTo(x,y)  把窗体调整为指定宽度和高度

    script>
    //窗体控制
    //位置
    moveBy(100,100);
    //moveTo(200,200)
    //尺寸
     window.resizeBy(100,100)
    resizeTo(400,400)
    </script>

    对窗体滚动条的控制,scrollBy(x,y) 相对于当前滚动条的位置移动的像素(前提有滚动条)。scrollTo(x,y) 相对于当前窗口的高度或宽度,移动到指定的像素

    scrollBy(0,100)
    scrollTo(0,200)

    innerHeight: 
    innerWidth:  IE不支持

     </head>
    	<script type="text/javascript">
    	<!--
    		  /*
    			window对象的属性:
    					  1.innerHeight: 返回文档显示区的高度  
    					  2.innerWidth: 返回文档显示区的宽度   IE不支持
    						  通用写法: window.document.body.clientWidth ;
    					  3. outerheight  包括了工具栏,菜单栏等的高度
    					  4. outerwidth   包括滚动条的宽度
    
    		  */
    		function init(){
    			var x = window.document.body.clientWidth ;
    			var y = window.document.body.clientHeight ;
    			alert(x + ":" + y) ;
    		}
    	//-->
    	</script>
     <body onload = "init()">
           <p>你好</p>
     </body>

    3.window.event window事件

    获取事件对象,当没有事件发生的时候为null。

     window.event
     window.onload=function  (e) {
    	 e
    	 var ev=e||window.event;
    }

    a.鼠标事件

    相对于浏览器位置的(左上角为(0,0))
         clientX  当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置
         clientY  当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置

    相对于屏幕位置的
         screenX   当鼠标事件发生的时候,鼠标相对于屏幕X轴的位置
         screenY

      window.onload=function  (e) {
         window.event
    	 var ev=e||window.event;
    	 var div1=document.getElementById("div1");
         document.onmousemove=function  (e) {
           var ev=e||window.event;
    	   var cx=ev.clientX;
    	   var cy=ev.clientY;
    	   var sx=ev.screenX;
    	   var sy=ev.screenY;
    	   div1.innerHTML="cx:"+cx+"--cy:"+cy+"<br/>sx:"+sx+"--sy:"+sy;
    	 }
    }
    
    <div id="div1" style="width:200px;height:200px;border:1px solid red">

    相对于事件源的位置
    IE:
    offsetX   当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
    offsetY

    FF:
    layerX   当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
    laterY

     window.onload=function  (e) {
         window.event
    	 var ev=e||window.event;
    	 var div1=document.getElementById("div1");
         div1.onclick=function  (e) {
         var ev=e||window.event;
    	 var ox=ev.offsetX ||ev.layerX;
    	 var oy=ev.offsetY ||ev.layerY;
         div1.innerHTML="ox:"+ox+"--oy:"+oy;
         }

    具体使用

    模拟窗口拖拽

    divs=document.createElement("div");	  
     divs.onmousedown=function  (e) {
            var ev=e||window.event;
            var ox=ev.offsetX ||ev.layerX;//第一次点击div不能动,相对于事件源的位置
    	     var oy=ev.offsetY ||ev.layerY;
    		 var ok=true;//标识鼠标放开的时候还移动
    		this.onmousemove=function  (e) {//移动的时候跟随鼠标移动
    		   if(ok){
    		   var ev=e||window.event;
    		   var cx=ev.clientX;
    		   var cy=ev.clientY;
    		   this.style.top=cy-oy+"px";//绝对定位
    		   this.style.left=cx-ox+"px";
    		   }
    		}
    		this.onmouseup=function  () {
             if(ok){
    		   ok=false;
    		 }
    	   }
    	   }
    
    <input type="button" id="but">

    b.键盘事件对象

    keyCode  获得键盘码
    空格:32   回车13  左上右下:37 38 39 40
    altKey   判断alt键是否被按下  按下是true 反之是false   布尔值
    ctrlKey   判断ctrl键
    shiftKey 判断shift键
    type   用来检测事件的类型   主要是用于多个事件通用一个事件处理程序的时候

    document.body.onkeydown=function  (e) {
    	   var ev=e||window.event;
    	   ev.keyCode
    	   ev.altKey
    	   ev.type
    }

    具体使用

    点击提交,内容自动读取

    <Script>
      window.onload=function  () {
        var one=document.getElementById("one");
        var texts=document.myform.texts;
    	var but=document.myform.but;
    	but.onclick=texts.onkeydown=function  (e) {//回车
    	   var ev=e||window.event;
           if(ev.type=="click" ||(ev.type=="keydown" && ev.keyCode==13 && ev.ctrlKey==true)){
    	      var elep=document.createElement("p");
    		  elep.innerHTML=texts.value;
    		  elep.className="pone";
    		  one.appendChild(elep);
    		  texts.value="";
    
    	   }
    	}
    
      }
    </script>
    
    
    <body>
    <div id="one" style="width:400px; background-color:#eeeeee;padding:10px">
      <h3>
         留言记录:
      </h3>
      <hr/>
      <p class="pone">
         你好
      </p>
    </div>
    <form name="myform">
      <textarea name="texts" cols=50 rows=10>
      </textarea>
      <input type="button" value="提交" id="but">
    </form>
    </body>

    4.关系类型

     A.parent返回父窗口
     B.top返回顶层窗口

     C.self===window

     D.stutas  设置窗口状态栏的文本

    <script>
      window.onload=function  () {
         alert(top===parent)
    	window.status="自定义的状态栏文字"
    	alert(frames[0])
      }
    </script>
    
    <frameset rows="20%,*">
       <frame src="top.html" >
       <frameset cols="20%,*" >
       <frame src="left.html" >
       <frame src="right.html" >
       </frameset>
    </frameset>

    self :等同于window对象
    opener:当前打开窗口的父窗口对象,支持opener.opener…的多重继续。
                       2种情况下使用opener:
                       1.使用winodw.open()方法打开的页面
                       2.超链(里面的target属性要设置成_blank)
    open方法,是打开一个页面.

    js中分为两种窗体输出:模态和非模态.window.showmodaldialog(),window.showmodeless()

    js的window.open()方法的使用

    open(string method,string url,boolean asynch,String username,string password)

    指定和服务器端交互的HTTP方法,URL地址,即其他请求信息;
    method:表示http请求方法,一般使用"GET","POST".
    url:表示请求的服务器的地址;
    asynch:表示是否采用异步方法,true为异步,false为同步;
    后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。

            		var url = "completeFormone.html?s=" + Math.random()+"&installAcceptId="+rows[0].installAcceptId;
            		window.open(url);

    打开新的窗口,open(url,name,feafurse,replace) 通过脚本打开新的窗口。

    open("test.html","windows","status=0,menubar=0,toolbar=0")
     window.onload=function  () {
        var names=document.getElementById("names");
    	var but=document.getElementById("but");
    	but.onclick=function  () {
    	  open("test.html","windows","status=0,menubar=0,toolbar=0")
    	}
     }

    模态和非模态.window.showmodaldialog(),window.showmodeless()

    showmodaldialog(”url”[,arguments][,features])

    重新打开一个页面

    	<script type="text/javascript">
    	<!--
    		function fun(){
    		
    			window.open("sub.html","","width=200,height=200,status=no,titlebar=no,menubar=no,toolbar=no,resizable=0") ;
    		}
    	//-->
    	</script>
     <body>
    	<input type="button" value="打开sub.html页面" onclick="fun()">
     </body>
    		  function fun(){
    			 self.open("sub.html") ;
    		  }
    
    	</script>
     <body>
          <input type="text" name="" id = "txt"> 
    	  <input type="button" value="打开sub.html页面" onclick="fun()">
    
    	  <a href = "sub.html" target = "_blank">打开sub.html页面</a>
     </body>

    openWindow()参数的传递与关闭刷新

    点击弹出一个新窗口

    	afvButton.click(function(){
    		debugger;
    		var orandid = $($("body input[id='orandid_view_act']"),$("div[id='divMain']",$("body",parent.document)).context.activeElement).val();
    		var volid = _grid.getIds();
    		openWindow(volid+"&volType=1",orandid);
    	})
    
    function openWindow(ids,orandid){
    	var options = {
    		modal : true,
    		title : "站箱调压器AFV检修记录",
    		collapsible : false,
    		minimizable : false,
    		maximizable : false,
    		closable : true,
    		closed : false
    	};
    	var uid = "self_card_";
    	options["id"] = uid;
    	winFormDesigner = UIFactory.getUI(uid);
    	if(!winFormDesigner){
    		winFormDesigner = UIFactory.create(xpad.ui.Window, options);
    	}
    	var root = jQuery("body");
    	var offset = root.offset();
    	var winleft = 0;
    	var wintop = 0;
    	var newSize = {};
    	newSize["left"] = 0;
    	newSize["top"] = 0;
    	newSize["width"] = jQuery("body").width();
    	newSize["height"] = jQuery("body").height();
    	winFormDesigner.window("resize", newSize);
    	setTimeout(function(){
    			winFormDesigner.loadURL(Leopard.getContextPath() + "/platform/views/cusviews/devMatainView/afvVoltage.jsp?ids="+ids+"&orandid="+orandid);
    		
    	}, 0);
    }
    

    设置窗口的滚动条

    为class为list_wrap增加overflow:auto属性,并动态设置高度

    如果内容被修剪,则浏览器会显示滚动条,以便查看其余内容

    <script type="text/javascript">
    $(function(){
    var height = $(window).height();
    $(".list_wrap").css("height",height);	
    })
    </script>
    

    参数的传递

    jsp获取openWindow传递的参数

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
    
    <c:set var="ctx" value="${pageContext.request.contextPath}" />
    <input id="root" type="hidden" value="${ctx }"/>
    <input id="ids" type="hidden" value="<%=request.getParameter("ids") %>"/>
    <input id="volType" type="hidden" value="<%=request.getParameter("volType") %>"/>
    <input id="orandid" type="hidden" value="<%=request.getParameter("orandid") %>"/>

    js获取jsp页面的值

    var root = null;
    var ids = null;
    var xcbh = null;
    
    
    $(document).ready(function() {
    	root = $("#root").val();
    	ids = $("#ids").val();
    	volType = $("#volType").val();
    	orandid = $("#orandid").val();
    	initpage();
    });
    
    function initpage(){
    	var isRead = $("#isRead").val();
    	if(isRead && isRead=="true"){
    		$(".tb_query").show();
    	}else{
    		$(".tb_query").hide();
    	}
    	root = $("#root").val();
    	
    	showTime();
    	
    	if(ids!="null"){
    		readxctyz();
    		readxctyzx();
    	}
    	var timer = "";
    	$("#save").click(function(){
    		xctyz();
    		$(this).attr("disabled", true); 
    		timer = setTimeout(function(){
    			$("#save").attr("disabled", false); 
            },6000);
    
    	})
    	
    	 $("#reset").click(function(){
    		    tjbxxcz();
    		    tyzxccz();
    	})
    }

    后台接收参数

    	@SuppressWarnings("unchecked")
    	@RequestMapping("/Addxctyz")
    	@ResponseBody
    	public Boolean Addxctyz(HttpServletRequest request, HttpServletResponse response,String requestParam){
    		String orandid = request.getParameter("orandid ");
    		String ids = request.getParameter("ids");
    }

    关闭openwindow刷新页面

    在外面div设置刷新按钮

    if($("#reloadGrid").length==0){
    	$("#SY_TYZJKXC-QForm .formBody").append("<button id='reloadGrid' style="dispaly:none">刷新</button>");
    	$("#reloadGrid").hide();
    	$("#reloadGrid").click(function(){
    		_grid.reload();
    	});
    }

    返回刷新外层div

        $.ajax({  
            url:root + "/AddAfv",  
            data:param,  
            type:"post",  
            dataType:"json",  
            success:function(data){  
                alert("保存成功");  
                debugger;
                $($("#reloadVolGrid",$("#layout_RECODR_MAINTAIN_VOLTAGE_listbar",parent.$(".panel window").context))).click();
            },  
            error:function(){  
            	alert("服务器正忙,请稍后重试");  
            }  
        }) 

    窗口全屏大小:

    <script>function fullscreen(){ this.moveto(0,0);this.outerwidth=screen.availwidth;this.outerheight=screen.availheight;}window.maximize=fullscreen;</script> 
    

    close方法

     <body>
    	<script type="text/javascript">
    	<!--
    		window.close() ;
    	//-->
    	</script>
     </body>

    parent:是打开窗口的父窗口对象

    2种情况下使用parent:
                       1.iframe 框架
                       2.frame 框架
    frames[]: 数组类型,代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
    示例:父子窗口相互传参.

      <title>window对象的parent属性</title>
     </head>
    	<script type="text/javascript">
    	<!--
    		function fun(){
    			//1.拿到文本框中填写的数据
    			   var v = document.getElementById("txt").value ;
    			//2.拿到子窗口对象
    			   var w = window.frames[0];
    			//3.拿到子窗口中的文本框对象
    			   var txt = w.document.getElementById("txt") ;
    			//4.将内容赋值给父窗口中的文本框对象的value属性
    				txt.value = v ;
    		}
    	//-->
    	</script>
     <body>
    	  姓名:<input type="text" name="" id = "txt"><input type="button" value="传递数据到子窗口中" onclick="fun()">
    	  <iframe src = "sub1.html"></iframe>
     </body>

    sub1.html

     </head>
    	<script type="text/javascript">
    	<!--
    		function fun(){
    			//1.拿到文本框中填写的数据
    			   var v = document.getElementById("txt").value ;
    			//2.拿到父窗口对象
    			   var w = window.parent;
    			//3.拿到父窗口中的文本框对象
    			   var txt = w.document.getElementById("txt") ;
    			//4.将内容赋值给父窗口中的文本框对象的value属性
    				txt.value = v ;
    		}
    	//-->
    	</script>
     <body>
          <input type="text" name="" id = "txt"><input type="button" value="传递数据到父窗口中" onclick="fun()">
     </body>

     对话框:
    1)消息框 alert() ;
    2)确认框 confirm() ;
    3)输入框 prompt() ; (了解)

    	<script type="text/javascript">
    	<!--
    		/*
    			三种对话框:1. 消息框:alert() ;
    					    2. 确认框: confirm() :返回Boolean类型的值
    						3. 输入框: prompt(): 返回输入的字符串(了解)
    		*/
    		//window.alert("你好") ;
    
    		/*while(true){
    			if(confirm("你爱我吗?") == false)
    			   continue ;
    			break ;
    		}*/
    
    		var a = prompt("请输入年龄:",12) ;
    		alert(a) ;
    	//-->
    	</script>

    window的模态窗体

     <body>
    	  <script type="text/javascript">
    	  <!--
    		   /*
    			    模态窗体:
    		   */
    
    		 //  window.showModalDialog("你好") ;  
    		  window.showModelessDialog("你好");
    	  //-->
    	  </script>
     </body>

    history对象

    history对象包含浏览器访问过的url,浏览器的历史记录访问

    <Script>
      window.onload=function  () {
         var one=document.getElementById("one");
    	 one.onclick=function  () {
    	    history.forward()
                history.back()
    		history.go(-3)
    		history.go(3)
    	 }
      }
    </script>
    
    <body>
    <p>
       history1.html
    </p>
    <script>
      alert(history.length)
    </script>
    <a href="history2.html">链接到2</a>
    <input type="button" value="前进" id="one">
    
    </body>

    a.  forward()前进  b.  back() 后退  c.  go(n) 正数是前进,负数是后退.

     </head>
    	 <script type="text/javascript">
    	 <!--
    		  /*
    			   history对象存储了访问过的页面。
    		  */
    
    		  function fun(){
    				history.forward();
    		  }
    	 //-->
    	 </script>
     <body>
    	  <a href = "b.html">b.html</a>
    	  <input type="button" value="前进" onclick="fun()">
     </body>

    b.html

     <script type="text/javascript">
    	 <!--
    		  /*
    			   history对象存储了访问过的页面。
    		  */
    
    		  function fun(){
    				history.forward();
    		  }
    
    		  function fun1(){
    			   history.back() ;
    		  }
    
    		  function fun2(){
    			   history.go(2) ;
    		  }
    	 //-->
    	 </script>
     <body>
    	  <a href = "c.html">c.html</a>
    	  <input type="button" value="前进" onclick="fun()">
    	  <input type="button" value="后退" onclick="fun1()">
    	  <input type="button" value="直接去d页面" onclick="fun2()">
     </body>

    c.html

     <script type="text/javascript">
    	 <!--
    		  /*
    			   history对象存储了访问过的页面。
    		  */
    
    		  function fun(){
    				history.forward();
    		  }
    
    		  function fun1(){
    			   history.back() ;
    		  }
    
    		  function fun2(){
    			   history.go(-2) ;
    		  }
    	 //-->
    	 </script>
     <body>
    	  <a href = "d.html">d.html</a>
    	  <input type="button" value="前进" onclick="fun()">
    	  <input type="button" value="后退" onclick="fun1()">
    	  <input type="button" value="直接去a页面" onclick="fun2()">
     </body

    d.html

     <script type="text/javascript">
    	 <!--
    		  /*
    			   history对象存储了访问过的页面。
    		  */
    
    		  function fun1(){
    			   history.back() ;
    		  }
    
    		  function fun2(){
    			   history.go(-3) ;
    		  }
    	 //-->
    	 </script>
     <body>
    	  <input type="button" value="后退" onclick="fun1()">
    	  <input type="button" value="直接去a页面" onclick="fun2()">
     </body>

    location对象

    location对象包含有当前url的相关信息
    1.href 属性: 是指要连接到其他的URL,返回完整的url
                            写法一、window.location.href='demo_window对象的close方法.html' ;
                            写法二、window.location='demo_window对象的close方法.html' ;

    1.reload方法: 刷新
                写法: window.location.reload() ;

    2.search   返回url?后面的查询部分

    3.protocol(http:),

    4.hostname(www.example.com)

    5.port(80)

    6.host(www.example.com:80)

    7.pathname(”/a/a.html”)

    8.hash(”#giantgizmo”,指跳转到相应的锚记)

    方法

    assign()   加载新的文档

    reload(boolean)   重新加载文档, 当参数是true,任何时候都会重新加载,false的时候,只有在文档改变的时候才会加载,否则直接读取内存当中的。

    replace() 用新的文档代替当前的文档  (没有历史记录)

    location.href="location2.html?1234"
    location.assign("location2.html");
    location.reload()
    location.replace("location2.html")
    
    
    window.location.reload()(刷新当前页面.)
    
    window.location.href=”url” (指定当前显示链接的位置)
    
    parent.location.reload()刷新父亲对象(用于框架)
    
    opener.location.reload()刷新父窗口对象(用于单开窗口)
    
    top.location.reload()刷新最顶端对象(用于多开窗口)
    
    
    	<script type="text/javascript">
    	<!--
    		/*1 href属性
    		  2. reload()方法:重新加载本页面
    		*/
    		function fun(){
    			//window.location.href = "b.html" ;
    			window.location = "b.html" ;
    		}
    
    		function fun1(){
    			window.location.reload();
    		}
    	//-->
    	</script>
     <body>
    		<input type="button" value="直接去b.html" onclick="fun()">
    		<input type="button" value="重新加载本页面" onclick="fun1()">
     </body>

    跳转到其他页面

    window.location.href=CONTEXT_PATH + "/subjectClassify/showSubjectClassifyNewsList?act=" + WebConst.EDIT+"&entityId="+subjectClassifyId;

    window.location.href在当前页面重新打开连接

       <div class="tit"><span onclick="ProdataShow.indexSkip('device')">资产信息</span></div>
    
            <div class="wrap_sub" style="height: 50%;">
             <div class="wraper">
                <div class="tit"><span onclick="ProdataShow.indexSkip('rushRepair')">应急抢修</span></div>
                <div class="con" id="demo1"></div>
             </div>
            </div>
    <script type="text/javascript" src="${rc.contextPath}/view/cusviews/js/index.js"></script>

    index.js

    $(function(){
    	ProdataShow.initOther();
    });
    
    /**
     * 首页
     */
    var ProdataShow = {
    		initOther:function(){
    			$(".amap-maptypecontrol").css("top","38px");
    			$(".amap-toolbar").css("top","86px");
    		},
    		
    		/**
    		 * 首页各个功能跳转
    		 * type:device-资产信息、rushRepair-应急抢修、pipeRun-管网运行、produceWork-生产作业
    		 * leakCheck-泄露检测
    		 */
    		indexSkip:function(type){
    			if($.isEmptyStr(type)){
    				layer.alert('地址不存在!', {icon: 0});
    				return;
    			}
    			var url = ""
    			switch(type)
    			{
    			case 'device':
    				url = CONTEXT_PATH + "/cusviews/dev/index";
    				break;
    			case 'rushRepair':
    				url = CONTEXT_PATH + "/cusviews/rush/index";
    				break;
    			case 'pipeRun':
    				url = CONTEXT_PATH + "/cusviews/pipe/index";
    				break;
    			case 'produceWork':
    				url = CONTEXT_PATH + "/cusviews/produce/index";
    				break;
    			case 'leakCheck':
    				url = CONTEXT_PATH + "/cusviews/leak/index";
    				break;
    			default:
    				url = CONTEXT_PATH + "/cusviews/index";
    			}
    			window.location.href = url;
    		}
    
    		
    }

    定时器倒数跳转其他页面

    <script>
    window.onload=function  () {
    setTimeout(function  () {
       location.href="location1.html";
    },3000)
    
    var num=document.getElementById("num")
    var nums=3
    setInterval(function  () {
        nums--
    	num.innerHTML=nums;
    },1000)
    }
    
    </script>
    <center>
    <div id="out">
       <div class="one">
       </div>
       <div class="two">
          3秒钟以后跳转
    	  <p id="num">
    	     3
    	  </p>
       </div>
    </div>
    </center>


     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。也就是说,在网页中定义的任何一个变量、对象和函数以window作为其Global对象。 1.全局作用域 既然window对象扮演...
  • window对象属性

    千次阅读 2019-06-28 23:08:15
    window对象属性 window对象中存储的属性和方法比较多,我们只对常用的做说明,不常用的看看就好。 首先是window中的这几个属性,这几个属性存储的值都是对象{}。每个对象对应一种操作,可以理解为将浏览器操作...
  • window对象 window对象是BOM的核心,代表浏览器窗口的一个实例。在浏览器中,window对象既是JavaScript访问浏览器窗口的接口,又是JavaScript的全局对象(Global)。因此在全局作用域中声明的所有变量和函数也是...
  • window对象的子对象

    千次阅读 2019-03-19 22:42:11
    window对象(有属性和方法) 特点: window是浏览器宿主对象,与js无关,支持所有浏览器,表示浏览器窗口 所有js的全局对象、全局函数、全局变量都是window对象的成员 注:以下所有属性都可以不需要window前缀,...
  • window对象是Web浏览器中javascript的一个终极兜底儿对象,在作用域中处于最末端,是一个包含所有对象的对象。所有在全局作用域中定义的属性和函数都是window对象的属性 var myStringVar = 'myString'; var ...
  • Java_window对象

    千次阅读 2018-07-07 10:29:40
    窗口对象窗口表示浏览器窗口,所有的浏览器都支持窗口对象,所有的JavaScript全局对象、函数以及、变量均自动成为window对象的成员。全局变量是窗口对象的方法。全局函数是窗口对象的方法.HTML DOM的文件也是窗口...
  • window对象(全局对象)

    千次阅读 2020-03-24 11:10:58
    window是浏览器的一个实例,在浏览器中,window对象又双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象1 选择练习 1 关于BOM下列说法正确的是?(选择两项) A BOM是...
  • Window对象的常用方法

    千次阅读 2018-07-23 19:34:51
    返回该窗口内包含的Frame对象,每个Frame对象又是一个window对象。 history 返回该窗口的浏览历史。 location 返回该窗口装载的HTML文档的URL navigator 返回浏览当前页面的浏览器。 ...
  • JS window对象

    千次阅读 2019-02-28 20:48:19
    一、window对象 1.所有浏览器都支持window对象,它表示浏览器窗口; 2.所有JS全局对象、函数以及变量均自动成为window对象的成员; 3.全局变量为其属性; var index=0; console.log(window.index); 4.全局函数为其...
  • vue里dom节点和window对象

    千次阅读 2020-07-03 17:32:57
    一、window对象 首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window。即使切换路由,window对象里面的属性和方法依旧会保留。因此可以在控制栏直接输入this、window、self都...
  • JS/JavaScript中概念的区分:global对象、window对象、document对象 1、Global Object (全局对象, global对象) ①JavaScript 中有一个特殊的对象,称为全局对象(Global Object),它及其所有属性都可以在...
  • window对象方法

    千次阅读 2019-03-20 19:41:57
    文章目录window对象的方法和属性 window对象的方法和属性 window对象是JS提供的一个内置对象,该对象是最大的一个内置对象,其中有很多方法和属性,可以直接调用 window.location对象用于获取当前页面的地址(URL)...
  • 框架集中的window对象 在HTML文档中,如果页面包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始)从左至右、从上至下访问每个window对象,或者使用...
  • Window对象、navigator对象和Location对象

    千次阅读 2018-07-04 19:34:11
    Window对象(最大的对象)概念:Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。属性:1、...
  • Window对象封装了窗口标题、工具按钮、地址栏、状态栏等,这些窗口的组成部分,也被定义为浏览器对象,都是window的成员对象,因此,构成一种层次结构,也就是浏览器对象模型(Browser Object Model) window对象的...
  • window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数。 1、全局的window对象 JavaScript中的任何一个全局函数或变量都是window的属性。 [removed] var name="撼地...
  • Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 ...
  • window对象方法(open和close)

    千次阅读 2020-03-24 18:28:48
    window对象 语法: window.open(pageURL,name,parameters) 功能: 打开一个新的浏览器窗口或查找一个已命名的窗口 参数说明: pageURL:子窗口路径 name:子窗口句柄(name声明了新窗口的名称,方便后期...
  • 众所周知,微信小程序的js中不能使用window对象以及document对象。 难道他们真的不存在吗?事实并非如此。 1、尝试获取window对象 熟悉this的同学都知道,在浏览器环境下,触发一个立即执行函数时,其中this的指向...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 621,014
精华内容 248,405
关键字:

window的对象