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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 标题栏 扩展标题栏修改颜色透明标题栏 系统状态栏

我们应用最上方的是标题栏,对于手机,最上方是状态栏。 我们可以自定义标题栏,和不显示标题栏。

45620
来自专栏小狼的世界

Silverlight学习笔记:改变控件的样式

Silverlight的控件都具有MS为我们赋予的默认样式,虽然这个样式也不怎么难看,但任何产品都很少用这个默认的样式去做最后的呈现,所以我们就需要对其进行修改...

8410
来自专栏张高兴的博客

张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

550100
来自专栏Java成神之路

为博客园添加目录的方法总结

参考链接: http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblog...

15220
来自专栏Java成神之路

博客园_01_为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html

13620
来自专栏不止是前端

Vue:父子组件信息传递

39380
来自专栏flutter开发者

SliverAppBar

好吧,我们还是来开始看下今天的内容吧。在前面的文章中我们将到了Appbar的用户,它类似于Android中的toolbar,但是熟悉Android开发的童鞋应该...

59630
来自专栏hotqin888的专栏

ppt(Powerpoint)中插入swf(flash)动画方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

13020
来自专栏技术博文

jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

当对象获得焦点后,自动把光标移到内容最后,使用focus()函数便可实现,下面有个不错的示例,感兴趣的朋友可以参考下 jquery获取焦点后光标在字符串后,当i...

39470
来自专栏数据小魔方

动态图表系列6|列表框(offset函数)

今天跟大家分享动态图表系列6——列表框(offset函数)! 具体步骤与前一篇相同: 插入列表框制作选择菜单; 使用offset函数返回动态数据源; 插入图表。...

33850

扫码关注云+社区

领取腾讯云代金券