第十六节 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>
补充：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>
以上是关于第十六节 BOM基础的主要内容，如果未能解决你的问题，请参考以下文章