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>

本文分享自微信公众号 - Java帮帮(javahelp)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-03-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 与Ajax同样重要的jQuery(2)

    练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" sr...

    Java帮帮
  • Java开发Struts2案例代码

    一、struts2综合案例 1、建立一个JavaWeb应用 ? 2、拷贝一下内容到您应用中:美工MM给你准备好的 ? 3、搭建Struts2的开发环境 a、拷贝...

    Java帮帮
  • mysql 对XA事务的支持

    MySQL 从5.0.3开始支持XA分布式事务,且只有InnoDB存储引擎支持。MySQL Connector/J 从5.0.0版本之后开始直接提供对XA的支持...

    Java帮帮
  • 数据分析入门系列教程-微博热点

    在前面,我们学习了爬虫的基本流程和必备技能,对于刚刚入门的人来说,打好基础,掌握基本步骤是最为重要的。

    周萝卜
  • 打造炫酷的通知插件EasyToaster

    引用 <link rel="stylesheet" type="text/css" href="./index.css"> <div id="slider"><...

    lonelydawn
  • Android 进阶7:进程通信之 AIDL 的使用

    记得 2015 年实习面试,笔试题里就有这道题:请介绍下 AIDL。 当时的我是懵逼的,只好老老实实空着。没想到后来面试时面试官大哥嘿嘿一笑说他也没用过这玩意,...

    张拭心 shixinzhang
  • 收起装13的苹果审核指南,就告诉你到底怎么能过!

    本文为作者在遍览诸多苹果商店审核指南文后愤然写下,以最容易被拒的地方房卡麻将闲游(无版权号)移动端手游APP为例。

    jiang chen
  • 案例分析:倾斜值传入导致 SQL 资源消耗升高

    作者 | 邓秋爽:云和恩墨技术工程师,有超过七年超大型数据库专业服务经验,擅长 Oracle 数据库优化、SQL 优化和 Troubleshooting。

    数据和云
  • Golang语言-- text/templete模板

    抽空把go 的text/templete模板整理学习了,现在总结下。 步骤 1、定义数据类型 ? ? ? ? ?

    李海彬
  • ios上架各类被拒app技术经验总结

    当你阅读过大量Apple官方发来的邮件或是说明文档、说明网页时,你会由衷地感觉通篇所说的基本都是些完全正确但又毫无意义的东西,根据业内一位资深朋友所述,一切Ap...

    jiang chen

扫码关注云+社区

领取腾讯云代金券