DOM&BOM-w3school(2020.2.11)【js Window BOM】

(一)js window
1.浏览器对象模型(Browser Object Model (BOM))允许 JavaScript 与浏览器对话。
不存在浏览器对象模型(BOM)的官方标准。
现代的浏览器已经(几乎)实现了 JavaScript 交互相同的方法和属性,因此它经常作为 BOM 的方法和属性被提到。
2. window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至(HTML DOM 的)document 对象也是 window 对象属性:

window.document.getElementById("header");

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3. 窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
·window.innerHeight - 浏览器窗口的内高度(以像素计)
·window.innerWidth - 浏览器窗口的内宽度(以像素计)
浏览器窗口(浏览器视口)不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5:
• document.documentElement.clientHeight
• document.documentElement.clientWidth

• document.body.clientHeight
• document.body.clientWidth
一个实用的 JavaScript 解决方案(包括所有浏览器),该例显示浏览器窗口的高度和宽度:(不包括工具栏和滚动条):

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

4.一些其他方法:
• window.open() - 打开新窗口

window.open(pageURL,name,parameters)

pageURL 为子窗口路径
  name 为子窗口句柄,win也为子窗口的window对象,注意区别
  parameters 为窗口参数(各参数用逗号分隔)
• window.close() - 关闭当前窗口
这个例子可以新打开一个空白窗口,并赋值给myWindow,还可以关闭它;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function openWin(){
   
	myWindow=window.open("","","width=200,height=100");
	myWindow.document.write("<p>这是'我的窗口'</p>");
}
function closeWin(){
   
	myWindow.close();
}
</script>
</head>
<body>
<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />
</body>
</html>

• window.moveTo() -移动当前窗口

window.moveTo(100,100); // 将当前窗口移动到屏幕坐标x=100,y=100的位置,是相对于屏幕左上角来说的。
window.moveB
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值