深入学习JavaScript中的bom


Posted in Javascript onMay 27, 2019

BOM(Broswer Object Model)

凡是 window 的属性和方法,均可以省略“window.”

方法:

框窗

1.警告框

window.alert("msg");

2.确认框

window.confirm("msg");

3.询问框

window.prompt("msg","defaulvalue")

页面

1.打开一个窗口

window.open()

2.在子窗口中使用,表示父窗口的window对象

window.opener

window.opener.fatherSayHello(); 调用父窗口的方法
window.opener.a

3.关闭当前窗口

window.close()

window.close(); 关闭当前
window.opener.close(); 关闭父窗口

定时任务

1.定时任务

var taskid = window.setTimeout(function,ms);
window.setTimeout("alert('hello!')", 5000);

2.间隔执行任务

var taskid = window.setInteval(function,ms);

3.清除定时任务

window.clearTimeout(taskid);

4.清除间隔执行任务

window.clearInteval(taskid);

打印屏幕

//长*宽
console.log(screen.width + "*" + screen.height)

后退

window.history.back();

前进

window.history.forward();

刷新

window.location.reload();//刷新
window.location.href = window.location.href;//刷新

Go 前进(x)步,后退(x)步,刷新(0),

window.history.go(x)

链接

window.location.href = http://www.baidu.com;

用户代理 浏览器内核

console.log(window.navigator.userAgent)

框窗

//凡是window的属性和方法,均可以省略“window.”
<script type="application/javascript">
// 警告框
function testAlert(){
var result=window.alert("这是一个警告框")
console.log(result);
}
// confirm 确认框
function testConfirm(){
var result =window.confirm("你确认要离开了吗?");
if(result){
alert("欢迎下次再来!")
}else{
alert("那你在逛逛吧!")
}
consol.log(result);
}
// prompt 询问框
function testPrompt(){
var result = window.prompt("请输入U盾密码","例如:123456");
console.log(result);
}
</script>
<body>
<button onclick="testAlert();">testAlert</button>
<button onclick="testConfirm();">testConfirm</button>
<button onclick="testPrompt();">testPrompt</button>
</body>

页面

//子页面
<script type="application/javascript">
function sayHello(){
alert("hello world")
}
//打开一个窗口
function callFatherMethod(){
window.opener.fatherSayHello();
window.opener.a
}
//关闭本窗口
function testClose(){
window.close();
}
//关闭父窗口
function testFatherClose(){
window.opener.close();
}
</script>
<body>
<button onclick="callFatherMethod()">调用父窗口的方法</button>
<button onclick="testClose()">关闭本窗口</button>
<button onclick="testFatherClose()">关闭父窗口</button>
</body>
//父页面
<script type="application/javascript">
var a = 10;
window.onload = function(){
console.log(window);
console.log("11111111111")
}
//打开一个新窗口
function testOpen(){
var sonwindow = window.open("son.html","aaa","height=300,width=500,top=50,left=50,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")
//子窗口的window对象
console.log(sonwindow);
}
function fatherSayHello(){
alert("hello son!");
}
</script>
<body>
<button onclick="testOpen();">打开一个新窗口</button>
</body>

定时任务

<script type="application/javascript">
function setTime() {
// window.setTimeout("alert('hello!')",5000);
window.setTimeout(sayHello, 5000);
}
var sayHello = function () {
alert("你好!");
}
</script>
</head>
<body>
<button onclick="sayHello();">调用sayHello</button>
<button onclick="setTime();">调用setTime</button>

间隔执行任务

<script type="application/javascript">
/*
window.onload = function(){
window.setTimeout(closeSelf, 1000);
}
function closeSelf() {
var secval = document.getElementById("sec").innerHTML;
var secint = parseInt(secval);
document.getElementById("sec").innerHTML = --secint;
if(secint == 0){
window.close();
}
window.setTimeout(closeSelf, 1000);
}
*/

var taskid = 0;
window.onload = function(){
//间隔执行任务,间隔 1000ms 执行一次
taskid = window.setInterval(closeSelf, 1000);
}
function closeSelf() {
//获取 10s 
var secval = document.getElementById("sec").innerHTML;
console.log(secval);
var secint = parseInt(secval);
console.log(secint);
//10s 减减
document.getElementById("sec").innerHTML = --secint;
if(secint == 0){
window.close();
}
}
// 4.清除间隔执行任务 暂停
function stopTask(){
window.clearInterval(taskid);
}
//继续计时
function goonTask(){
taskid = window.setInterval(closeSelf, 1000);
console.log(taskid)
}
</script>
<body>
付款成功,页面将在<span id="sec">10</span>s后关闭。
<button onclick="stopTask()">稍等,待会我会自己关闭</button>
<button onclick="goonTask()">继续读秒,关闭窗口</button>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
Vue实现根据hash高亮选项卡
May 27 #Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 #Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
了解javascript中的Dom操作
May 27 #Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
深入浅出了解Node.js Streams
May 27 #Javascript
You might like
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
JavaScript游戏之优化篇
2010/11/08 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
js style动态设置table高度
2014/10/21 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
如何在django中运行scrapy框架
2020/04/22 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
一个SQL面试题
2014/08/21 面试题
岗位说明书范文
2014/05/07 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
科技之星事迹材料
2014/06/02 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
会议接待欢迎标语
2014/10/08 职场文书
机关工会工作总结2015
2015/05/26 职场文书
大学运动会通讯稿
2015/07/18 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
Nginx 匹配方式
2022/05/15 Servers