JavaScript交互式网页设计——浏览器对象模型

最新推荐文章于 2024-07-24 23:00:08 发布

讨厌睡不着

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量597

点赞数

分类专栏： JavaScript 文章标签：前端开发语言

本文链接：https://blog.csdn.net/qq_62296995/article/details/121975653

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<一>.浏览器对象模型

BOM：浏览器对象模型的简称，JavaScript按照BOM实现的功能不同将BOM拆分成若干个对象，这样JavaScript就能以对象的形式操作浏览器了，BOM主要包括window对象（窗口）、location对象（地址栏）、history对象（历史地址栏）和document对象（HTML文档）等，window对象时BOM的顶层对象

BOM的主要功能：

1.弹出新窗口

2.移动、关闭和更改窗口大小

3.提供浏览器的详细信息

4.提供载入当前页面的详细信息

5.提供用户屏幕分辨率信息

6.支持cookies

<二>.window对象

<1>.常用的属性

属性：document、location、history、status（状态栏文本），window对象处于BOM的第一层，每个新窗口都视为window对象，这些属性既是BOM的对象又是window对象的属性

<2>.常用的方法

1.alert（）：弹出一个警告对话框

	<script>
			var name = window.prompt("请输入您的名字！");
			window.alert("您的名字为"+name);
		</script>

2.prompt（）：弹出一个提示对话框，其中有一个文本框，文本框的值会返回（点击确定返回值，点击取消返回null），方法有两个参数，第一个是用户输入的值，第二个是文本框的初始默认值（undefined）

<script>
		var message  = prompt("您的姓名是：");
		console.log(message);
	</script>

3.confirm（）：弹出一个确认对话框，点击确认返回true，点击取消返回false，方法只有一个参数，即为需要向用户描述的问题

        <script>
		var flag = window.confirm("确认删除吗？");
		if (flag) {
			window.alert("删除成功！");
		} else{
			window.alert("删除失败！");
		}
		</script>

3.open（）：打开一个新的窗口，共有三个参数，URL地址、窗口名称、窗口特征，省略URL地址，会弹出一个空白的窗口，窗口名称尽量省略，这样可以省去判断是否存在重复窗口的时间，窗口特征有width、height和left、top（与屏幕左边和顶部的距离），都以像素为单位

4.close（）：关闭窗口

<body>
		<script>
			var open;
			window.onload = function(){
				open = open("info.html","info","width = 800,height=500,left=400,top=200");
			}
		</script>
		<a href="javascript:open.close()">关闭窗口</a>
	</body>

5.setTimeout()<1>、setInterval()<2>和clearInterval()<3>:1和2类似，1是指定时间后执行的程序代码并退出，2是指定时间后反复执行程序代码，是周期性的，直至调用3才退出,1和2都有两个参数，一个是带引号的代码或函数名，另一个是执行代码的延迟时间，以毫秒为单位

<三>,history对象的方法

1.forward():前进一个页面，相当于浏览器前进按钮

2.back():后进一个页面，相当于浏览器后退按钮

3.go()：打开一个指定位置的页面，参数为整数，代表前进或后退几个页面

<四>,location对象

<1>,属性

1：href：返回或设置页面URL地址

2.hostname:返回主机域名

3.pathname:返回当前页面的路径和文件名

4.port:返回web主机的端口号

5.protocol:返回使用的web协议（例如http）

<2>.方法

1.reload（）：刷新页面

2.assign（）：加载新的文档

<body>
	<p id="thep"></p>
	<script>
		document.getElementById("thep").innerHTML="URL地址为"+
		location.URL+"<br>端口号："+location.port+"<br>页面路径和文件名："+
		location.pathname+"<br>web协议："+location.protocol+"<br>主机域名："+
		location.hostname;
		function changeUrl(){
			var thehref = document.getElementById("sel").value;
			location.href = thehref;
		}
	</script>
	<h3>请选择网站：</h3>
	<select id="sel" onchange="changeUrl()">
		<option value="http://www.baidu.com">百度</option>
		<option value="http://www.qq.com">腾讯</option>
	</select>
	<a href="javascript:location.assign('http://www.baidu.com')">百度一下，你就知道</a>
	<a href="javascript:location.reload()">刷新</a>
	</body>

<五>.Screen对象常用属性

1.availWidth:可用宽度（不包含任务栏）

2.availHeight:可用宽度（不包含任务栏）

3.Width:屏幕宽度（包含任务栏）

4.Height:屏幕高度（包含任务栏）

讨厌睡不着

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript交互式网页设计——浏览器对象模型

<一>.浏览器对象模型BOM：浏览器对象模型的简称，JavaScript按照BOM实现的功能不同将BOM拆分成若干个对象，这样JavaScript就能以对象的形式操作浏览器了，BOM主要包括window对象（窗口）、location对象（地址栏）、history对象（历史地址栏）和document对象（HTML文档）等，window对象时BOM的顶层对象BOM的主要功能：1.弹出新窗口2.移动、关闭和更改窗口大小3.提供浏览器的详细信息4.提供载入当前页面的详细信息5
复制链接

扫一扫