076_浏览器对象模型

最新推荐文章于 2023-07-11 15:02:05 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-07-11 15:02:05 发布

阅读量465

点赞数

分类专栏： JavaScript学习文章标签： javascript html html5

本文链接：https://blog.csdn.net/aihiao/article/details/109654391

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

1. 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话。

2. 浏览器对象模型(Browser Object Model(BOM))

2.1. 不存在浏览器对象模型(BOM)的官方标准。

2.2. 现代的浏览器已经(几乎)实现了JavaScript交互相同的方法和属性, 因此它经常作为BOM的方法和属性被提到。

3. Window对象

3.1. 所有浏览器都支持window对象。它代表浏览器的窗口。

3.2. 所有全局JavaScript对象, 函数和变量自动成为window对象的成员。

3.3. 全局变量是window对象的属性。

3.4. 全局函数是window对象的方法。

3.5. 甚至(html DOM的)document对象也是window对象属性:

window.document.getElementById("header");
// 等同于:
document.getElementById("header");

4. 窗口尺寸

4.1. window.innerWidth, 浏览器窗口(浏览器视口)的内宽度(以像素计), 不包括工具栏, 如果有水平滚动条, 也包括滚动条高度。

4.2. window.innerHeight, 浏览器窗口(浏览器视口)的内高度(以像素计), 不包括工具栏, 如果有垂直滚动条, 也包括滚动条高度。

4.3. window.innerWidth和window.innerHeight是只读属性。

4.4. window.outerWidth返回窗口的外部宽度, 包括所有的界面元素(如工具栏/滚动)。

4.5. window.outerHeight返回一个窗口的外部高度, 包括所有界面元素(如工具栏/滚动条)。

4.6. window.outerWidth和window.outerHeight是只读属性。

4.7. 在非全屏模式下外部宽度和高度比内部宽度和高度还会额外多出16px(Chrome, 不同浏览器不相同)。

4.8. 例子

4.8.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>浏览器窗口的尺寸</title>
	</head>
	<body>
		<script type="text/javascript">
			// 改变浏览器窗口大小会输出不一样的值
			document.write('浏览器窗口的内宽度: ' + window.innerWidth + ', 浏览器窗口的内高度: ' + window.innerHeight + '<br />');
			document.write('浏览器窗口的外部宽度: ' + window.outerWidth + ', 浏览器窗口的外部高度: ' + window.outerHeight + '<br />');
		</script>
	</body>
</html>

4.8.2. 效果图

5. Window open()方法

5.1. open()方法用于打开一个新的浏览器窗口。

5.2. 语法

window.open(URL,name,specs)

5.3. 参数

6. Window close()方法

6.1. close()方法用于关闭浏览器窗口。

6.2. 只有通过JavaScript代码打开的窗口才能够由JavaScript代码关闭。这阻止了恶意的脚本终止用户的浏览器。

6.3. 语法

window.close()

6.4. 例子

6.4.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>Window open()和close()方法</title>
	</head>
	<body>
		<iframe name="iframe_a" frameborder="0" style="width: 400px;height: 250px;border: solid 1px;">浏览器不支持iframe</iframe>
		<br /><br />
		<button onclick="openNewBlank()">打开一个新的空白窗口</button>
		<button onclick="openNameBlank()">窗口名称为_blank</button>
		<button onclick="openNameBlankFull()">窗口名称为_blankFull</button>
		<button onclick="openNameSelf()">窗口名称为_self</button>
		<button onclick="openName()">窗口名称为iframe_a</button>
		<button onclick="closeMyWin()">关闭我的窗口</button>
		
		<script type="text/javascript">
			function openNewBlank() {
			    window.open();
			}
			
			var myWindow;
			function openNameBlank() {
			    myWindow = window.open('', '_blank', 'width=800,height=500,left=200,top=100');
			    myWindow.document.write("<p>这是'我的窗口'</p>");
			    myWindow.focus();
			}
			
			function openNameBlankFull() {
			    var closeWindow = window.open('', '_blank');
			    closeWindow.document.write("<button onclick='closeWin()'>关闭窗口</button>");
			    closeWindow.document.write("<script type='text\/javascript'>");
			    closeWindow.document.write("function closeWin() {");
			    closeWindow.document.write("window.close();");
			    closeWindow.document.write("}");
			    closeWindow.document.write("<\/script>");
			}

			function openNameSelf() {
			    window.open('https://www.baidu.com/', '_self');
			}

			function openName() {
				window.open('https://v.qq.com/', 'iframe_a');
			}

			function closeMyWin() {
				if(myWindow != undefined) myWindow.close();
			}		
		</script>
	</body>
</html>

6.4.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
076_浏览器对象模型

1. 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话。2. 浏览器对象模型(Browser Object Model(BOM))2.1. 不存在浏览器对象模型(BOM)的官方标准。2.2. 现代的浏览器已经(几乎)实现了JavaScript交互相同的方法和属性, 因此它经常作为BOM的方法和属性被提到。3. Window对象3.1. 所有浏览器都支持window对象。它代表浏览器的窗口。3.2. 所有全局JavaScript对
复制链接

扫一扫

专栏目录