第十六节 BOM基础

Posted han-bky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第十六节 BOM基础相关的知识,希望对你有一定的参考价值。

打开、关闭窗口

  open:蓝色理想运行代码功能

1 <button onclick="window.open(‘http://www.baidu.com‘)">打开窗口</button>
2 <!--此时会打开一个新的页面,而用<a></a>表示在当前页面切,换到点击的页面-->
3 <a href="http://www.baidu.com">百度</a>
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>蓝色理想运行代码功能</title>
 6     <script>
 7         window.onload = function () {
 8             var oTxt = document.getElementById(txt1);
 9             var oBtn = document.getElementById(btn1);
10 
11             oBtn.onclick = function () {
12                 var oNewWin = window.open(about:blank, _blank);
13                 //参数有:_self(相当于在本页面基础上切换窗口)
14                 // _blank(本页面还存在的情况下,新建空白窗口)  _top
15 
16                 oNewWin.document.write(oTxt.value);     //如果写的是一段HTML代码,则会直接运行
17             };
18         };
19     </script>
20 </head>
21 <body>
22 <textarea id="txt1"></textarea><br/>
23 <button id="btn1">运行</button>
24 </body>
25 </html>
View Code

补充:document.write(‘abcd‘):首先清空页面内所有内容,然后再把“()”内的内容全部写入清空的页面上(不经常使用)

  close:关闭时提示问题

1 <button onclick="window.close();">关闭页面</button>
2 <!--直接关闭当前窗口-->
3 <button onclick="window.open(‘close.html‘)">打开新页面</button><!--正确使用方法--> 

注意:在火狐浏览器下“close”必须和“open”成对出现,否则“close”无效,即关闭不了当前页面; 而在IE浏览器下,会出现提示弹窗,让你进行选择“是”或“否”,另外当在IE下,“close”和“open”成对出现时,选择“close”关闭页面时,不会出现提示弹窗; Google直接关闭当前页面,不关闭窗口

常用属性:

  window.navigator.userAgent

1 alert(window.navigator.userAgent);    //navigator导航器,领航员
2 //在Chrome下运行返回:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36

  window.location

1 alert(window.location);     //返回该文件存放的位置,或网址
2 //http://localhost:2009/Python_file/78.html?_ijt=pqvditols5t8ge43e6v9sb9389 

  另外,window.location还有另一种使用方法,相当于open(‘...‘, ‘_self‘);

1 <button onclick="window.location=‘http://www.baidu.com‘">aaa</button>

 

尺寸和坐标:

1 clientHeight:获取页面可视区高度
2 clientWidth:获取页面可视区宽度
3 scrollTop:页面可视区顶端离页面顶端的距离 

  窗口尺寸、工作区尺寸

    可视区尺寸:

document.documentElement.clientWidth
document.documentElement.clientHeight
需要注意的是:可视区的大小会随着用户的调节而发生变化,所以可视区是不定的,但是内容发不发生变化要看程序员的设定了 

    滚动距离:  

document.body.scrollTop  //之前版本的Chrome,获取滚动距离
document.documentElement.scrollTop  //目前比较通用

实例:“固定悬浮框”我们之前可以用CSS中“position:fixed;”,现在我们用JS的方法使“悬浮框” 不随可视窗口的滚动而上下移动;

 

常用的方法和事件:

  系统对话框:

    警告框:alert("内容"),没有返回值,窗口内只有一个“确定”按钮,或没有按钮;

    选择框:confirm("提问的内容"),返回Boolean,窗口内有两个按钮“确定(对应的返回值为 true)”和“取消(对应的返回值为 false)”;

1 var res = confirm(‘你确定要删除?‘);
2 alert(res);    //点击“确定”返回true;点击“取消”返回false

    输入框:prompt(),返回字符串null,弹出一个输入框。

1 var res = prompt(‘请输入姓名:‘, ‘输入框中默认存在的文字‘);
2 alert(res);    //返回值为 用户输入的内容

  window对象常用事件:

    onload:窗口加载时需要执行的JS代码

    onscroll:窗口滚动时需要执行的JS代码

    onresize:窗口大小发生变化时需要执行的JS代码

    例子:回到顶部按钮、侧边栏广告

      闪烁问题

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定悬浮框</title>
 6     <style>
 7         #div1{
 8             width: 200px;
 9             height: 200px;
10             /*position: fixed;*/
11             position: absolute;
12             background: green;
13             bottom: 0;
14             left: 0;
15         }
16     </style>
17     <script>        
18         //实现悬浮窗口一直固定在左下角
19         window.onscroll = window.onresize = function () {
20             var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;    //或 语句是为了解决兼容问题
21             var oDiv = document.getElementById(div1);
22 
23             oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+px;
24             //问题是当我们把页面大小改变的时候,悬浮窗口不一定会在左下角,解决办法是“window.onresize”,如上所写,表示当改变页面大小时页面内容需要发生的变化
25             //还有一个问题是,窗口实现的时候会有“抖动”现象发生,解决办法是IE6以上版本的浏览器我们可以使用“fixed”固定窗口位置,IE6我们可以使用运动
26         };
27     </script>
28 </head>
29 <body style="height: 2000px">    
30     <div id="div1"></div>
31 </body>
32 </html>
View Code

 

以上是关于第十六节 BOM基础的主要内容,如果未能解决你的问题,请参考以下文章

第十六节:时隔两年再谈异步及深度剖析async和await

第十六节 URL映射的时候指定默认参数

centos mysql 实战 第十六节课

centos mysql 优化 第十六节课

第十六节:pandas之日期时间

Android测试第十六节Instrumentation——初识