第十六节 BOM基础
打开、关闭窗口
open：蓝色理想运行代码功能
<button onclick="window.open('http://www.baidu.com')">打开窗口</button>
<!--此时会打开一个新的页面，而用<a></a>表示在当前页面切，换到点击的页面-->
<a href="http://www.baidu.com">百度</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蓝色理想运行代码功能</title>
<script>
window.onload = function () {
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
var oNewWin = window.open('about:blank', '_blank');
//参数有：_self（相当于在本页面基础上切换窗口）
// _blank（本页面还存在的情况下，新建空白窗口） _top oNewWin.document.write(oTxt.value); //如果写的是一段HTML代码，则会直接运行
};
};
</script>
</head>
<body>
<textarea id="txt1"></textarea><br/>
<button id="btn1">运行</button>
</body>
</html>
补充：document.write('abcd'):首先清空页面内所有内容，然后再把“()”内的内容全部写入清空的页面上（不经常使用）
close：关闭时提示问题
<button onclick="window.close();">关闭页面</button>
<!--直接关闭当前窗口-->
<button onclick="window.open('close.html')">打开新页面</button><!--正确使用方法-->
注意：在火狐浏览器下“close”必须和“open”成对出现，否则“close”无效，即关闭不了当前页面； 而在IE浏览器下，会出现提示弹窗，让你进行选择“是”或“否”，另外当在IE下，“close”和“open”成对出现时，选择“close”关闭页面时，不会出现提示弹窗； Google直接关闭当前页面，不关闭窗口
常用属性：
window.navigator.userAgent
alert(window.navigator.userAgent); //navigator导航器，领航员
//在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
alert(window.location); //返回该文件存放的位置，或网址
//http://localhost:2009/Python_file/78.html?_ijt=pqvditols5t8ge43e6v9sb9389
另外，window.location还有另一种使用方法，相当于open('...', '_self');
<button onclick="window.location='http://www.baidu.com'">aaa</button>
尺寸和坐标：
clientHeight：获取页面可视区高度
clientWidth：获取页面可视区宽度
scrollTop：页面可视区顶端离页面顶端的距离
窗口尺寸、工作区尺寸
可视区尺寸：
document.documentElement.clientWidth
document.documentElement.clientHeight
需要注意的是：可视区的大小会随着用户的调节而发生变化，所以可视区是不定的，但是内容发不发生变化要看程序员的设定了
滚动距离：
document.body.scrollTop //之前版本的Chrome，获取滚动距离
document.documentElement.scrollTop //目前比较通用
实例：“固定悬浮框”我们之前可以用CSS中“position:fixed;”，现在我们用JS的方法使“悬浮框” 不随可视窗口的滚动而上下移动；
常用的方法和事件：
系统对话框：
警告框：alert("内容")，没有返回值，窗口内只有一个“确定”按钮，或没有按钮；
选择框：confirm("提问的内容")，返回Boolean，窗口内有两个按钮“确定（对应的返回值为 true）”和“取消（对应的返回值为 false）”；
var res = confirm('你确定要删除？');
alert(res); //点击“确定”返回true；点击“取消”返回false
输入框：prompt()，返回字符串null，弹出一个输入框。
var res = prompt('请输入姓名：', '输入框中默认存在的文字');
alert(res); //返回值为 用户输入的内容
window对象常用事件：
onload：窗口加载时需要执行的JS代码
onscroll：窗口滚动时需要执行的JS代码
onresize：窗口大小发生变化时需要执行的JS代码
例子：回到顶部按钮、侧边栏广告
闪烁问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定悬浮框</title>
<style>
#div1{
width: 200px;
height: 200px;
/*position: fixed;*/
position: absolute;
background: green;
bottom: 0;
left: 0;
}
</style>
<script>
//实现悬浮窗口一直固定在左下角
window.onscroll = window.onresize = function () {
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //或 语句是为了解决兼容问题
var oDiv = document.getElementById('div1'); oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
//问题是当我们把页面大小改变的时候，悬浮窗口不一定会在左下角，解决办法是“window.onresize”，如上所写，表示当改变页面大小时页面内容需要发生的变化
//还有一个问题是，窗口实现的时候会有“抖动”现象发生，解决办法是IE6以上版本的浏览器我们可以使用“fixed”固定窗口位置，IE6我们可以使用运动
};
</script>
</head>
<body style="height: 2000px">
<div id="div1"></div>
</body>
</html>
第十六节 BOM基础的更多相关文章
- 第三百三十六节，web爬虫讲解2—urllib库中使用xpath表达式—BeautifulSoup基础
第三百三十六节,web爬虫讲解2—urllib库中使用xpath表达式—BeautifulSoup基础 在urllib中,我们一样可以使用xpath表达式进行信息提取,此时,你需要首先安装lxml模块 ...
- 第十六节、基于ORB的特征检测和特征匹配
之前我们已经介绍了SIFT算法,以及SURF算法,但是由于计算速度较慢的原因.人们提出了使用ORB来替代SIFT和SURF.与前两者相比,ORB有更快的速度.ORB在2011年才首次发布.在前面小节中 ...
- 风炫安全web安全学习第三十六节课-15种上传漏洞讲解(一)
风炫安全web安全学习第三十六节课 15种上传漏洞讲解(一) 文件上传漏洞 0x01 漏洞描述和原理 文件上传漏洞可以说是日常渗透测试用得最多的一个漏洞,因为用它获得服务器权限最快最直接.但是想真正把 ...
- 第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- 第四百一十六节，Tensorflow简介与安装
第四百一十六节,Tensorflow简介与安装 TensorFlow是什么 Tensorflow是一个Google开发的第二代机器学习系统,克服了第一代系统DistBelief仅能开发神经网络算法.难 ...
- 第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承
第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...
- 第三百七十六节，Django+Xadmin打造上线标准的在线教育平台—创建用户操作app，在models.py文件生成5张表，用户咨询表、课程评论表、用户收藏表、用户消息表、用户学习表
第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表.课程评论表.用户收藏表.用户消息表.用户学习表 创建名称为ap ...
- 第三百六十六节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询
第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询 bool查询说明 filter:[],字段的过滤,不参与打分must:[] ...
- 第三百五十六节，Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点
第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点 1.分布式爬虫原理 2.分布式爬虫优点 3.分布式爬虫需要解决的问题
随机推荐
- FTP服务器匿名登录
ftp需要开通对匿名用户.本地用户.及虚拟用户的支持.并且特别对虚拟用户中的(stu.teacher.admin)分别授予不同的权限. 1.创建多层目录,然后挂载 2.配置yum源文件 3.安 ...
- 源码包安装mysql5.6
含有的命令:wget,tar,cp,groupadd,useradd,chown,service,chkconfig,exportsource,mysql_secure_installation,my ...
- fpga xilink 电平
- kubernetes in action - Pods
Pods 在上一篇也说明了,pods是kubernetes的最小部署单元,并且所有在pods中的container共享namespaces 那么为什么需要pods这样的概念? 因为在实际中,我们有一种 ...
- STREAMING HIVE流过滤 官网例子 注意中间用的py脚本
Simple Example Use Cases MovieLens User Ratings First, create a table with tab-delimited text file f ...
- 刀客139qq算命
https://www.zhouyi.cc/bazi/sm/BaZi.php 好的算命网站 根据辛亥时看出来的午亥暗合没那么简单他不克你她太弱了婚姻不顺,是因为夫妻宫是财坏印是要比劫克财克财很重要 出 ...
- linux基础命令--groupmod 修改组定义
描述 groupmod命令用于修改系统上的组定义. groupmod命令通过更改组数据库(the group database)里的相关条目来修改指定的组. 语法 groupmod [选项] GROU ...
- Luogu4113 [HEOI2012]采花
题目大意:给定一个长度为$n$的序列$a_i$,$m$次询问,每次询问$[l,r]$,求在区间内有多少个数出现了至少2次. 数据范围:$1\leq l\leq r\leq n\leq 2*10^6,1 ...
- 深入剖析虚拟DOM提升性能（Vue，React）；
I.原始渲染方式(直接操作DOM): 1.state数据: 2.JSX模板: 3.数据 + 模板 相结合,生成真实的DOM来显示: 4.state发生改变: 5.数据 + 模板结合,生成真实的DOM来 ...
- 【Solution】idea中dtd没有找到
问题: idea中dtd没有找到 解决: 一般是相关依赖没有加进来,把相关依赖添加进来即可 在pom中添加依赖