WEB前端第三十六课——jsBOM操作

  • A+
所属分类:Web前端
摘要

1.BOM基础  BOM(Browser Object Model)即浏览器对象模型  BOM相关说明:

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">

          <menu type="context" id="mymenu">
            <menuitem label="Refresh"></menuitem>
            <menuitem label="Twitter"></menuitem>
          </menu>
        </div>

    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);

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