BOM浏览器对象
BOM 浏览器对象 一、浏览器本身就自己有一些对象,不用创建就可以使用 window(当前浏览器窗体)
属性:
status
opener
closed
parent
top 方法:
alert();
confirm();
setInterval();
clearInterval(); setTimeout();//只执行一次
clearTimeOut(); open();//打开一个新窗体 a链接也可以跳转打开新窗体,两者的区别是:window的open打开的窗体是有联系的,a链接的是没有任何关系的
closed 返回指定窗体是否是关闭的 document
frames
location
history
screen
... [window.]成员
document.write(); 本身window
open可以弹出子窗体
frams多个窗体
<html>
<head> </head> <body>
<a href="www.baiyu.com" onclick="return confirm('你确定要删除吗?')">删除</a>
</body>
</html>
confirm
<html>
<!-- 砰砰砰 游戏-->
<head> </head> <body onkeydown="js()">
<div id="one" style="position:absolute; top:0px; left:0px; width:100px; height:80px; background:red;">
</div> <script>
var sx=5;
var sy=5; var top_1=0;
var left_1=0;
var height_1=document.body.clientHeight;
var width_1=document.body.clientWidth;
var one=document.getElementById("one");
function sa(){
if(top_1>=(height_1-one.offsetHeight) || top_1<0){
sy=-1*sy;
}
if(left_1>=(width_1-one.offsetWidth) || left_1<0){
sx=-1*sx;
}
top_1+=sy;
left_1+=sx;
one.style.top=top_1;
one.style.left=left_1;
}
function js(){
sx=sx*2;
sy=sy*2;
}
var dt=setInterval("sa()",50);
one.onmouseover=function(){
clearInterval(dt);
}
one.onmouseout=function(){
dt=setInterval("sa()",50);
}
</script>
</body>
</html>
碰撞
<html> <head> </head>
<body onunload="clo()">
<!--<a href="01.html" target="_blank">新</a>-->
<script>
var subw=window.open("04.html","_blank","top=300,left=300,width=200,height=200");
/*
设置子窗口属性使用逗号隔开
父窗口操作子窗口使用的是子窗口名
*/
function show(obj){
subw.document.body.bgColor=obj.value;
}
function ss(){
window.document.title="guodaxia";
} //closed返回指定窗体是否是关闭的
function clo(){
if(!subw.closed){
subw.close();
}
}
</script> <input type="button" onclick="show(this)" value="red"><br/>
<input type="button" onclick="show(this)" value="green"><br/>
<input type="button" onclick="show(this)" value="yellow"><br/>
<input type="button" onclick="show(this)" value="blue"><br/>
<input type="button" onclick="show(this)" value="#ff00ff"><br/> </body> </html>
<html> <head> </head>
<body>
<script>
/*
子窗口中有一个opener属性,代表父窗口对象
*/
function show(obj){
opener.document.body.bgColor=obj.value;
}
opener.ss();//子窗口调用父窗口方法 </script> <input type="button" onclick="show(this)" value="red"><br/>
<input type="button" onclick="show(this)" value="green"><br/>
<input type="button" onclick="show(this)" value="yellow"><br/>
<input type="button" onclick="show(this)" value="blue"><br/>
<input type="button" onclick="show(this)" value="#ff00ff"><br/> </body> </html>
open父子窗口
<html> <head>
<style type="text/css">
frame{
border:1px solid red;
}
</style> </head> <frameset rows="100,*">
<frame name="top" />
<frameset cols="150,*">
<frame name="menu" src="menu.html"/>
<frame name="main" />
</frameset> </frameset>
</html>
<html>
<head> </head> <body>
<input type="button" onclick="document.body.bgColor='yellow'" value="改自己的"/>
<input type="button" onclick="window.parent.parent.frames[0].document.body.bgColor='red'" value="改上面的"/>
<!--
<input type="button" onclick="window.parent.parent.frames[2].document.body.bgColor='blue'" value="改右边的"/>
-->
<input type="button" onclick="window.top.frames['main'].document.body.bgColor='blue'" value="改右边的"/>
</body>
<script>
/*
想要改变其他窗口就需要获取其他窗口的window对象,如何获取其他窗口的window对象呢?
我们前面在使用父子窗口的时候,子窗口是可以获取得到父窗口的,使用的是opener,父窗口获取子窗口使用的是window.子窗口名
使用frame,其实有点类型于子父窗口 注意在frame中获取父窗口使用的是parent属性,一般都是获取到顶层窗口再寻找指定窗口设置。获取到指定窗口后窗口下标是0开始,排序是从左往右,从上往下。如果只是获取上一个窗口操作可能发生错误。 一直找最外层窗口有点麻烦,我们可以使用top属性获取最外层的窗口对象,然后使用它的frames属性获取frames对象数组
*/
</script> </html>
framms控制
windows对象中的常用对象属性
document
location
html跳转:
<meta http-equiv="refresh" content="3">三秒刷新一次
<meta http-equiv="refresh" content="3;url="http://www.baidu.com">三秒刷新跳转到指定页面 js跳转
window.navigate(url);//重定向
location.href='url';
location.replace('url);
history
back()
go(i) i表示向上返回的步数,i是负数
screen clipboardData剪切板对象
setData(数据类型字符串,数据对象);
<html>
<head>
<!--<meta http-equiv="refresh" content="3;02.html">-->
<meta http-equiv="refresh" content="3;url=02.html">
</head> <body> </body> <script>
document.write(new Date());
</script>
</html>
<html>
<head> </head> <body>
12131
</body>
<script>
setTimeout(function(){
//window.navigate("01.html");火符IE不兼容
//window.location.href="01.html";
//location="01.html";//这样简写也可以
location.replace("01.html");//这样会替换掉原来的链接,无法后退
location.reload();//重新加载
},3000);
</script>
</html>
刷新与跳转
<html>
<head></head>
<body>
<a href="two.html">向下</a>
</body> </html>
<html>
<head></head>
<body>
<a href="javascript:history.go(-1);">向上一步</a>
<a href="javascript:history.go(-2);">向上两步</a>
</body> </html>
<html>
<head></head>
<body>
<a href="three.html">向下</a>
<a href="javascript:history.back()">向上一步</a>
</body> </html>
history向上与向下
<html>
<head></head>
<body> </body>
<script>
with(document){
write("您的屏幕显示设定值如下:<p>");
write("屏幕的实际高度为"+screen.availHeight+"<br/>");
write("屏幕的实际宽度为"+screen.availWidth+"<br/>");
write("屏幕的色盘深度为"+screen.colorDepth+"<br/>");
write("屏幕区域的高度为"+screen.height+"<br/>");
write("屏幕区域的宽度为"+screen.width);
}
</script> </html>
屏幕对象
<html>
<head>
<!-- 复制到粘贴板 -->
</head> <body>
<!--都没成功
<a href="javascript:window.external.AddFavorite('07.html','07学习')">收藏</a>
<a href="javascript:this.setHomePage('07.html');">设为首页</a>
<div id="one">
-->
aaaaaaaaaaaaaaaaaaaaaaa<br/>
bbbbbbbbbbbbbbbbbbbbbbb<br/>
ccccccccccccccccccccccc<br/>
ddddddddddddddddddddddd<br/>
eeeeeeeeeeeeeeeeeeeeeee<br/>
</div>
<input type="button" onclick="copyc()" value="复制文本内容"/>
</body>
<script>
var one=document.getElementById("one"); function copyc(){
var content=one.innerText;
window.clipboardData.setData("Text",content);
}
</script>
</html>
复制文本到粘贴栏
BOM浏览器对象的更多相关文章
- BOM浏览器对象模型和API速查
什么是BOMBOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是wi ...
- JS BOM(浏览器对象)
BOM即浏览器对象模型,它包括如下一些对象! (一)screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息. 常见的属性有: availHeight:返回显示屏幕的高度 availWid ...
- 浏览器(BOM)对象的一些内置方法总结
浏览器(BOM)对象的一些内置方法总结 一.总结 1.bom就是浏览器那端执行的代码,dom就是服务器那端操作html的代码 2.记好bom的几个对象,那就很好理解很多代码了,也很好写很多代码了 二. ...
- js中浏览器对象BOM
参考 : https://www.cnblogs.com/Peng2014/p/4725524.html 1. window对象 https://www.runoob.com/jsref/ob ...
- BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
- DOM_05之DOM、BOM常用对象
1.HTML DOM常用对象之Table:①创建:createTHead():createTBody():createTFoot():②删除:deleteTHead():deleteTFoot():③ ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- Js浏览器对象
Js浏览器对象——window对象 1.window对象: (1)window对象是BOM的核心,window对象指当前的浏览器窗口. (2)所有的JavaScript全局对象.函数以及变量均自动成为 ...
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
随机推荐
- iOS导航栏-关闭半透明
self.navigationController.navigationBar.translucent = NO;
- JUC回顾之-ThreadPoolExecutor的原理和使用
Spring中的ThreadPoolTaskExecutor是借助于JDK并发包中的java.util.concurrent.ThreadPoolExecutor来实现的.基于ThreadPoolEx ...
- tomcat下context.xml中JNDI数据源配置
jndi(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API.命名服务将名称和对象联系起来,使得我们可以用 ...
- 经典SQL查询语句大全
一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备份数 ...
- 一个国外网盘pCloud——支持离线下载
给大家分享一个国外网盘<支持离线下载> https://my.pcloud.com/#page=register&invite=HiegZ8aBrt7
- Sublime Text 新建文件可选类型的模版插件: SublimeTmpl
安装方法: 1.Ctrl+Shift+P打开控制台, 2.输入IP安装插件 3.输入tmpl 回车安装 编辑模版在:SublimeTmpl\templates"文件夹修改 其他情况: htt ...
- c 从语言中的内存管理
在C里,内存管理是通过专门的函数来实现.另外,为了兼容各种编程语言,操作系统提供的接口通常是 C 语言写成的函数声明(Windows 本身也由C和汇编语言写成). 1 分配内存 malloc 函数 需 ...
- [iOS]URL编码和解码
1. 首先来看下什么样的是URL编码(字符串中带有%22 类似这样的) NSString *str = @"http://m.tuniu.com/api/home/data/index/c/ ...
- EXT实现表格斑马线
Ext.grid.GridPanel 单双行颜色样式(斑马线)2014-04-03 11:25 1078人阅读 评论(0) 收藏 举报分类:ExtJs(36)Ext.grid.GridPanel st ...
- POJ3267——The Cow Lexicon(动态规划)
The Cow Lexicon DescriptionFew know that the cows have their own dictionary with W (1 ≤ W ≤ 600) wor ...