深入学习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 相关文章推荐
js中的string.format函数代码
Aug 11 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
JavaScript实现答题评分功能页面
Jun 24 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python numpy数组中的复制知识解析
2020/02/03 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
小学新教师培训方案
2014/02/03 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
研讨会主持词
2014/04/02 职场文书
英语故事演讲稿
2014/04/29 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
2014年教育工作总结
2014/11/26 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
护士岗位竞聘书
2015/09/15 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Mysql 一主多从的部署
2022/05/20 MySQL