打开、关闭窗口

  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基础的更多相关文章

  1. 第三百三十六节,web爬虫讲解2—urllib库中使用xpath表达式—BeautifulSoup基础

    第三百三十六节,web爬虫讲解2—urllib库中使用xpath表达式—BeautifulSoup基础 在urllib中,我们一样可以使用xpath表达式进行信息提取,此时,你需要首先安装lxml模块 ...

  2. 第十六节、基于ORB的特征检测和特征匹配

    之前我们已经介绍了SIFT算法,以及SURF算法,但是由于计算速度较慢的原因.人们提出了使用ORB来替代SIFT和SURF.与前两者相比,ORB有更快的速度.ORB在2011年才首次发布.在前面小节中 ...

  3. 风炫安全web安全学习第三十六节课-15种上传漏洞讲解(一)

    风炫安全web安全学习第三十六节课 15种上传漏洞讲解(一) 文件上传漏洞 0x01 漏洞描述和原理 文件上传漏洞可以说是日常渗透测试用得最多的一个漏洞,因为用它获得服务器权限最快最直接.但是想真正把 ...

  4. 第一百二十六节,JavaScript,XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  5. 第四百一十六节,Tensorflow简介与安装

    第四百一十六节,Tensorflow简介与安装 TensorFlow是什么 Tensorflow是一个Google开发的第二代机器学习系统,克服了第一代系统DistBelief仅能开发神经网络算法.难 ...

  6. 第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

    第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...

  7. 第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表、课程评论表、用户收藏表、用户消息表、用户学习表

    第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表.课程评论表.用户收藏表.用户消息表.用户学习表 创建名称为ap ...

  8. 第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询

    第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询 bool查询说明 filter:[],字段的过滤,不参与打分must:[] ...

  9. 第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点

    第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点 1.分布式爬虫原理 2.分布式爬虫优点 3.分布式爬虫需要解决的问题

随机推荐

  1. archlinux下我的软件列表

    编辑器:leafpad,gvim 终端:zsh,xfce4-terminal 音乐:网易云音乐(良心),DeadBeef(和win的foobar2000差不多) 视频播放:mpv PDF:Acrore ...

  2. 使用 JProbe 调试 Linux 内核(转)

    https://liam.page/2018/04/28/debug-in-Linux-kernel-jprobe/

  3. 消除 ASP.NET Core 告警 "No XML encryptor configured. Key may be persisted to storage in unencrypted form"

    在 ASP.NET Core 中如果在 DataProtection 中使用了 PersistKeysToFileSystem 或 PersistKeysToFileSystem services.A ...

  4. [dev][dpdk][crypto] dpdk加解密设备与IPSEC

    概述 分三部分,加解密框架(crypto framework),加解密设备(crypto dev),安全协议(Security Framework) ×  API,设计思路等,都在加解密框架里:见文档 ...

  5. flask基础一

    一:flask认知 flask 短小精悍,可扩展强 flask 所有扩展的网址,flask.pocoo.org/externsions 有别于其他的web框架的地方:flask做了一个上下文管理机制 ...

  6. react将字符串转义成html语句

    在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,然而直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式 ...

  7. Windows10 正式企业版激活

    一.镜像 https://www.landiannews.com/archives/51102.html 二.ISO镜像文件比对SHA1值,判定文件是否被篡改 https://msdn.itellyo ...

  8. MySQL Server8.0版本时出现Client does not support authentication protocol requested by server

    MySQL Server8.0版本时出现Client does not support authentication protocol requested  by server 解决方法: 1.roo ...

  9. 创建一个vue项目()

    1.打开cmd,选定路径 2. vue init webpack "项目名称“ 3.在项目路径下,安装一下项目依赖 cnpm install 4.运行   cnpm run dev 5.在浏 ...

  10. 支持Linux系统的加密狗

    深思数盾 https://www.sense.com.cn/ 产品:精锐5 版本:标准版.精灵版.IE版.时钟锁 快速实现高安全度的软件保护,轻松定义多种授权模式1.防止软件盗版,防止逆向工程 通过增 ...