WEB前端第三十六课——jsBOM操作-window、timer

当前位置:

首页 > 网站开发 > JavaScript教程 >

WEB前端第三十六课——jsBOM操作-window、timer

1.BOM基础

　　BOM（Browser Object Model）即浏览器对象模型

　　BOM相关说明：

　　　　① BOM提供了独立于内容而与浏览器窗口进行交互的对象

　　　　② 由于BOM主要用于管理窗口与窗口之间的通信，因此其核心对象是 window对象

　　　　③ BOM由一系列相关对象构成，并且每个对象都提供了很多方法与属性

　　　　④ BOM缺乏一个统一的标准

　　　　　　JavaScript语法的标准化组织是ECMA

　　　　　　DOM的标准化组织是 W3C（所有浏览器公共遵循的标准）

　　　　　　BOM是各个浏览器厂商根据 DOM在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同

　　　　⑤ 通常情况下所说的BOM，一般都是指 window对象

　　BOM与 DOM的区别与联系

　　　　① DOM通过 document对象访问、控制、修改HTML和XHTML等文档中的内容

　　　　② BOM通过 window对象来访问、控制、修改浏览器中的内容

　　　　③ BOM包含 DOM，用来访问浏览器的是BOM对象，从 BOM对象可以访问到 DOM对象，进而操作浏览器和读写文档内容

　　　　④ BOM描述了处理网页内容的方法和接口（操作页面内部），BOM描述了与浏览器进行交互的方法和接口（操作页面之间）

2.window对象

　　window对象是BOM具象化的表现形式

　　因为 window对象是 JavaScript中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，

　　在调用的时候可以省略 window，如下：

　　　　打开窗口：window.open(url);

　　　　关闭窗口：window.close();

　　　　获取事件：window.event;

　　　　获取文档：window.document;

3.window对象的name属性

　　window.name是window对象的一个属性，默认值为空

　　特性：window.name值在不同的页面（甚至不同域名）加载后依旧存在，且可以支持非常长的 name值（2M左右）

　　应用：由于window.name属性具有在不同页面保持存在的特性，出现了一门叫作“跨域传输”的技巧，而这个技巧的内部实现原理就是window.name属性的持久性特性。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跨域传输</title>

</head>

<body>

<script>

    var cont=110;

    //定义window.name属性值，属性值内的变量可以是任何类型的数据

    window.name='var cont=110;';

</script>

</body>

</html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跨域加载</title>

</head>

<body>

    <button>跨域加载</button>

<script>

    var btn=document.querySelector('button');  //定义一个触发按钮（非必要）

    btn.onclick=function () {

        var iframe=document.createElement('iframe');  //创建iframe元素作为加载跨域内容的容器

        iframe.src = 'test.html';  //通过iframe.src属性将需要跨域加载的文档链接赋值

        iframe.style.display='none';  //隐藏iframe框架的界面显示

        document.body.appendChild(iframe);  //将创建的iframe添加至当前页面body中

    //    当iframe加载完毕后，意味着“window.name”的内容已经赋予完毕

        iframe.onload=function () {

            var iframeContent=event.target.contentWindow.name;  //获取iframe中的window.name属性内容

            console.log(iframeContent);  //直接获取过来的window.name属性值为string形式，不是可执行代码

            eval(iframeContent);  //通过“eval()”方法将字符串形式的代码转换为可执行代码

            console.log(cont);

        }

    }

</script>

</body>

</html>

4.window对象的尺寸属性

　　① 浏览器尺寸

　　　　window.outerHeight;

　　　　window.outerWidth;

　　这两个属性返回的是整个浏览器的高度和宽度，与页面窗口大小没有任何关系

　　② 页面窗口尺寸

　　　　window.innerHeight;

　　　　window.innerWidth;

　　这两个属性返回的是视口的高度和宽度（计算滚动条的尺寸），跟随页面窗口变化

　　③ 页面内容尺寸

　　　　document.documentElement.clientHeight;

　　　　document.documentElement.clientWidth;

　　这两个属性返回视口的高度和宽度，不计算滚动条的尺寸

　　④ 页面滚动距离

　　　　window.pageXOffset;

　　　　window.pageYOffset;

　　这两个属性指的是页面内容发生滚动的距离，返回值为“滚动距离”

　　⑤ 浏览器与屏幕距离

　　　　window.screenX;

　　　　window.screenY;

　　这两个属性指的是浏览器与屏幕的距离，左上角为各自的（0,0）坐标点

5.window.navigator对象

　　window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器和操作系统方面非常有用

　　这个对象和 event一样是一个全局变量，并且是唯一的

　　常用属性：

　　　　navigator.appCodeName；浏览器代码名的字符串表示

　　　　navigator.appName；官方浏览器名的字符串表示

　　　　navigator.appVersion；浏览器版本信息的字符串表示

　　　　navigator.cookieEnable；如果启用cookie返回true，否则返回false

　　　　navigator.javaEnable()；如果启用java返回true，否则返回false

　　　　navigator.platform；浏览器所在计算机平台的字符串表示

　　　　navigator.plugins；安装在浏览器中的插件数组

　　　　navigator.userAgent；返回和浏览器内核相关的信息

　　如果window.navigator.userAgent返回值出现了Mobile，则可以确定用户使用的是移动设备

6.window对象常用方法

　　alert()；显示带有一段消息和一个确认按钮的提示框

　　prompt()；显示可提示用户输入的对话框

　　confirm()；显示带有一段消息以及确认按钮和取消按钮的对话框

　　open()；打开一个新的浏览器窗口或查找一个已命名的窗口

　　close()；关闭浏览器窗口

　　print()；打印当前窗口的内容

　　focus()；把键盘焦点给予一个窗口

　　blur()；把键盘焦点从顶层窗口移开

　　moveBy()；可相对窗口当前坐标移动指定的距离(像素)

　　moveTo()；把窗口的左上角移动到指定的坐标位置

　　resizeBy()；按照指定的像素尺寸调整窗口大小

　　resizeTo()；将窗口的大小调整到指定的宽度和高度

　　scrollBy()；按照指定的像素值滚动页面内容

　　scrollTo()；把页面内容滚动到指定的坐标位置

　　setInterval()；每隔指定的时间执行代码

　　setTimeOut()；在指定的延迟时间后执行代码

　　clearInterval()；取消 setInterval设置

　　clearTimeOut()；取消 setTimeOut设置

7.提示框

　　① alert ()，

　　　　表示警示框，主要用于提示用户信息，该方法执行后无返回值

　　　　语法：window.alert(' alertMsg'); //无返回值所以console.log(alert(''));结果为 undefined

　　　　alert()方法弹出的对话框是模态对话框，在对话框关闭之前程序暂停，直到关闭后才继续执行

　　② prompt ()，

　　　　表示警示框，主要用于提示并收集用户信息，该方法执行后根据情况不同返回值略有不同

　　　　语法：window.prompt ('alertMsg', 'defaultMsg');

　　　　点击取消时，返回值为 null

　　　　没有设置默认值（defaultMsg）时，

　　　　　　如果用户没有输入内容，确认后返回一个空字符串，取消后返回null

　　　　　　如果用户输入了内容，返回值为用户输入的内容

　　　　设置了默认值（defaultMsg）时，

　　　　　　如果用户没有输入内容，则确认后返回默认值

　　　　　　如果用户输入了内容，返回值为用户输入的内容

　　　　同样，prompt()方法也是模态对话框，在对话框关闭之前程序暂停，直到关闭后才继续执行

　　③ confirm()，

　　　　表示警示框，主要用于提示用户确认信息，点击确认返回 true，点击取消返回 false

　　　　语法：window.confirm(' alertMsg ');

　　　　同样，confirm()方法也是模态对话框

　　　　一般情况下，通过判断用户做出的选择，作为后续程序执行条件

8.提示框综合案例

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义鼠标右键菜单</title>

    <style>

        *{margin: 0;padding: 0;}

        ul{

            width: 130px;

            list-style: none;

            display: inline-block;

            background-color: #cccccc;

            position: absolute;   /*设置绝对定位以便于跟随焦点坐标显示*/

            display: none;

        }

        li{

            height: 30px;

            padding: 5px 10px;

            line-height: 30px;

        }

        ul li:hover{

            background-color: hotpink;

            color: blue;

            cursor: pointer;

            transition: 0.3s;

        }

    </style>

</head>

<body>

<!--通过ul>li创建右键菜单列表-->

<ul>

    <li>Alert提示</li>

    <li>关闭页面</li>

    <li>BaiDu选中内容</li>

    <li>输入搜索内容</li>

</ul>

<!--在页面中创建一个文本输入区域，第三个li用-->

<textarea cols="100" rows="20" style="font-size: 20px"></textarea>

<script>

    var ulMenu=document.querySelector('ul');

    var ulOption=document.querySelector('li');

//  禁用系统右键菜单事件“contextmenu”

    document.oncontextmenu=function () {

        return false;     //return false表示事件禁用

    }

//    定义鼠标抬起时触发事件

    document.onmouseup=function (eve) {

    //    通过 event.button属性返回值判断鼠标按键

    //     console.log(event.button);

//    返回值“0”代表左键，返回值“1”代表滚轮，返回值“2”代表右键,...

        if (event.button==2){

            ulMenu.style.display='inline-block';

            ulMenu.style.left=eve.clientX+'px';

            ulMenu.style.top=eve.clientY+'px';

        }else{

            ulMenu.style.display='none';

        }

    }

    //通过“事件委托”的方式获取触发节点，判断需要执行的操作

    ulMenu.onmousedown=function (eve) {        //此处必须使用mousedown事件！

        if (eve.target.innerHTML=='Alert提示'){

            alert('这是alert()方法测试');

        }else if (event.target.innerHTML=='关闭页面'){

            if (confirm('确定离开了么？')){

                window.close();

            }

        }else if (eve.target.innerHTML=='BaiDu选中内容'){

            //使用getSelection()方法获取光标选中的文本内容，返回值为 object

            //而搜索使用的是字符串，需要再使用 toString()方法将获取结果转换为字符串

            //如果绑定事件为 onclick或 onmouseup时，返回值为空字符串

            var textSelect=document.getSelection().toString();

            // console.log(textSelect);

            open('http://www.baidu.com/s?word='+textSelect);

        }else{

            var searchText=prompt('请输入你想搜索的内容','比如：美女')

            window.open('http://www.baidu.com/s?word='+searchText);

        }

    }

    ulMenu.onmouseleave=function () {

        ulMenu.style.display='none';

    }

</script>

</body>

</html>

9.知识碎片：

　　① <textarea>标签

　　　　<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本

　　　　常用属性：

　　　　　　name，规定文本区域的名称

　　　　　　autofocus，当前页面加载时文本区域自动获取焦点

　　　　　　cols，规定文本区域内可见的列数

　　　　　　rows，规定文本区域内可见的行数

　　　　　　maxlength，规定文本区域允许的最大字符数

　　　　　　placeholder，设置描述性提示，加载时显示在文本区域

　　　　　　readonly，规定文本区域为只读

　　　　　　required，规定文本区域为必填项

　　　　　　wrap，规定提交表单时，区域内文本如何换行，

　　　　　　　　　属性值包括 hard（提交表单时文本换行）、soft（提交表单时文本不换行，默认值）

　　② contextmenu

　　　　在HTML中，该属性规定了元素的上下文菜单，，当用户右击元素时将显示上下文菜单

　　　　　　　　　　属性值是需要打开的<menu>元素的 id

　　　　语法示例：<div contextmenu="mymenu">

　　　　oncontextmenu事件，在元素中用户右击鼠标时触发并打开上下文菜单

　　　　　　语法：元素节点 .oncontextmenu=function(){ };

　　　　　　还可以直接在HTML的元素属性中定义该事件，如前面的<div>标签属性可以如下书写：

　　　　　　　　<div contextmenu="mymenu" oncentextmenu=' myFunction() '>;

　　③ event.button属性

　　　　button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。

　　④ getSelection()方法

　　　　该方法可以返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置

　　　　语法：window.document.getSelection();

　　　　想要将getSelection()的返回值（对象）转换为字符串，可以通过连接一个空字符串(' ')，或使用 .toString()方法

　　　　select()方法，表示全选当前输入的内容

10.间隔调用

　　间隔调用又被称作定时器，是一种能够每隔一定时间自动执行一次的函数

　　语法示例：var timer=null;

　　　　　　　timer=setInterval { function(){ }，执行间隔时间/ms};

　　清除间隔调用函数，使用 clearInterval()方法

　　　　语法：clearInterval(变量标识);

　　　　示例：clearInterval (timer);

　　注意事项：

　　　　① 间隔调用的返回值是一个数字队列，因此，通过访问数字队列来清除间隔调用也是可以的

　　　　② 如果间隔调用的函数需要传入参数，则间隔调用不能使用匿名函数，需要使用如下方式声明

　　　　　　var timer=null;

　　　　　　timer=setInterval(' myFunction( 参数值 ) ', 执行间隔时间); //调用函数是“字符串”形式

　　　　③ 间隔调用不是立即执行，而是在“任务队列中的任务完成后”才执行间隔调用

　　　　④ 因为间隔调用的实际执行者是 window，因此间隔调用函数内部的 this指向的是 window

11.延迟调用

　　延迟调用是一种在等待一定时间后执行的函数（执行一次）

　　语法：var timer=null；

　　　　　timer=setTimeout( function(){ }, 延迟执行时间/ms);

　　延迟调用函数的用法与间隔调用函数基本相同

出处：https://www.cnblogs.com/husa/p/13611142.html

栏目列表