JS之浏览器对象BOM
时间:2022-05-04
本文章向大家介绍JS之浏览器对象BOM,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
DOM Window 代表窗体
DOM History 历史记录
DOM Location 浏览器导航
重点:window、history、location ,最重要的是window对象
1.window对象
Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象
window.frames 返回窗口中所有命名的框架
parent是父窗口(如果窗口是顶级窗口,那么parent==self==top)
top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)
self是当前窗口(等价window)
opener是用open方法打开当前窗口的那个窗口
①:父子窗体之间的通讯
在页面内嵌入一个iframe,在iframe中提供一个输入项,输入后,在iframe外面窗口中显示内容
显示结果如上图所示,实现思路如下:
子窗体:2.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<script type="text/javascript">
functionshowOutter(){
// 获得输入内容
varcontent = document.getElementById("content").value;
// 将输入的内容显示到主窗体info 中
window.parent.document.getElementById("info").innerHTML = content;
}
</script>
</head>
<body>
<h1>子窗体</h1>
<input type="text" id="content" />
<input type="button" value="显示到主窗体" onclick="showOutter();"/>
</body>
主窗体:1.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>父子窗体通信</title>
<script type="text/javascript">
functionshowContent(){
// 用主窗体读取子窗体内容
varcontent = window.frames[0].document.getElementById("content").value;
alert(content);
}
</script>
</head>
<body>
<h1>主窗体</h1>
<div id="info"></div>
<!-- 在主窗体中获得子窗体内容 -->
<input type="button" value="获取子窗体输入内容" onclick="showContent();" />
<iframe src="2.html"></iframe>
</body>
②:window的open close
<head>
<title>打开关闭窗体</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
//用一个变量记录打开的网页
varopenNew;
functionopenWindow(){
openNew = window.open("http://www.itcast.cn");
}
//关闭的时候需要注意关闭的是打开的网页,而不是本身
functioncloseWindow(){
openNew.close();
}
</script>
</head>
<body>
<input type="button" value="打开传智播客网页" onclick="openWindow()">
<input type="button" value="关闭传智播客网页" onclick="closeWindow()">
</body>
③:window弹出对话框相关的3个方法
alert()警告框 confirm()确认框 prompt()输入框
<script type="text/javascript">
alert("这是警告框!")
varcon = confirm("你想好了吗?");
alert(con);
varmsg = prompt("请输入姓名","张三");
alert(msg);
</script>
④:定时操作setInterval & setTimeout
setInterval:定时任务会重复执行
setTimeout:定时任务只执行一次
在页面动态显示当前时间
<script type="text/javascript">
window.onload = function(){
vardate = newDate();
document.getElementById("time1").innerHTML =date.toLocaleString();
document.getElementById("time2").innerHTML =date.toLocaleString();
setInterval("show1();",1000); //间隔1秒后重复执行
setTimeout("show2();",1000); //1秒后执行,执行1次
}
functionshow1(){
vardate = newDate();
document.getElementById("time1").innerHTML =date.toLocaleString();
}
functionshow2(){
vardate = newDate();
document.getElementById("time2").innerHTML =date.toLocaleString();
setTimeout("show2();",1000);//不终止
}
</script>
<body>
<div id="time1"></div>
<div id="time2"></div>
</body>
2.history 对象
代表历史记录,常用来制作页面中返回按钮
<input type="button" value="返回" onclick="history.back();" />
<input type="button" value="返回" onclick="history.go(-1);" />
3.Location 对象
代表浏览器导航 在js函数中发起href链接效果
location.href='跳转后url' ; 等价于 <a href='xxx'></a>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP ajax+jQuery 实现批量删除功能实例代码小结
- python对execl 处理操作代码
- Python手动或自动协程操作方法解析
- 什么是python的自省
- python Socket网络编程实现C/S模式和P2P
- keras 多任务多loss实例
- 什么是python的必选参数
- python进程与线程小结实例分析
- PHP集成环境XAMPP的安装与配置
- Python socket服务常用操作代码实例
- Python select及selectors模块概念用法详解
- keras使用Sequence类调用大规模数据集进行训练的实现
- python的json包位置及用法总结
- 如何优雅的使用 laravel 的 validator验证方法
- phpMyAdmin通过密码漏洞留后门文件