Python学习笔记：5.2.6 javascript之BOM对象

最新推荐文章于 2024-08-06 12:58:11 发布

WinvenChang

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量169

点赞数

分类专栏： Python全栈工程师学习笔记文章标签： javascript window对象 location对象 navigator对象 history对象

本文链接：https://blog.csdn.net/u014257214/article/details/104209400

版权

Python全栈工程师学习笔记专栏收录该内容

173 篇文章 24 订阅

订阅专栏

本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！

一、课程目标

window对象
location对象
navigation对象
history对象

二、详情解读

2.0.0.面向对象编程练习

练习1：
定义一个车的构造函数，然后再定义汽车，自行车的构造函数，汽车与自行车主要是动力不同，
轮子数量不一样

function Vehicle(){

}
Vehicle.prototype.move = function(){
		console.log("move speed:", this.speed)
	}
	
function Car(power) {
	Car.prototype.constructor.call(this)
	this.wheel = 4
	this.speed = 100
}

Car.prototype = new Vehicle()

function Bike(power){
	Car.prototype.constructor.call(this)
	this.wheel = 2
	this.speed = 20
}
Bike.prototype = new Vehicle()

var car = new Car()
var bicycle = new Bike()

在这里插入图片描述

2.0.1.BOM - 浏览器对象模型

BOM - browser object model
包含window、location、navigator等对象

2.1.window对象

1.iframe在一个页面创建多个窗口
2.利用window.open创建子窗口
3.窗口对话框
4.url与location

测试窗口：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			a = 10
			b = 11
			// 打开当前窗口的窗口
			function hello(){
				console.log("hello world")
			}
			// document.write(window.top.name)
			
			// window.opener.console.log("opener:",window.opener)
			if (window.opener!=null){
				window.document.write("您是我的父窗口")
			}			
			
		</script>
	</body>
</html>

2.1.1.iframe

1.通过窗口名称可以调用同域名下的其他窗口变量
2.通过window.子窗口名称.属性可以访问iframe窗口的属性
3.在iframe窗口内通过window.top访问主窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		<iframe name="no1" 
		src="http://www.sina.com.cn" width="100%" height=200 
		></iframe>
		<iframe name="no2"
		src="http://www.baidu.com" width="100%" height=200 
		></iframe>
		 -->
		<!-- <a href="http://www.baidu.com" target="no2">打开百度</a> -->
		
		<iframe name="no2" 
		src="06.1.0测试窗口.html" width="100%" height=500 
		></iframe>
        
		<script type="text/javascript">
			// iframe 是窗口框架元素，可以通过iframe在一个主窗口内嵌多个子窗口
			
			//可以通过窗口名称调用同域名下的其他窗口变量
			// no2.a
			// no2.b
			
			/* 
			可以通过window.子窗口名称.属性访问iframe窗口的属性
			比如通过location指定窗口打开页面
			window.no2.location = url
			 */
			// window.no2.location = "http://www.baidu.com"
			
			// 在iframe窗口内通过window.top访问主窗口
			window.name = "luxp"		
		</script>
	</body>
</html>

2.1.2.window.open

window.open(url, name, args)：在指定名为name的窗口中打开url网址
args是一个字符串，设置新窗口的属性，多个属性以逗号隔开：

属性	说明	可选值
height、width	窗口宽高	不能小于100
top、left	窗口位置
location	是否显示地址栏	yes 、no
menubar	是否显示菜单栏	yes 、no
resizable	是否允许拖动浏览器窗口改变大小	yes 、no
scrollbars	是否允许滚动显示	yes 、no
status	是否允许显示状态栏	yes 、no
toolbar	是否允许显示工具栏	yes 、no

window方法：

方法名	说明
window.moveTo(x,y)	将窗口移动到x，y位置
window.moveBy(offsetX, offsetY)	将窗口相对原来的位置移动offsetX, offsetY距离
window.resizeTo(w,h)	调整窗口大小到w, h
window.resizeBy(deltaW, deltaH)	在原来大小基础上调整窗口deltaX, deltaY
window.close()	关闭窗口

在A窗口中打开B窗口，A窗口可以通过window.open的返回值，比如下面示例代码中的sub_window来访问B窗口的变量属性
B窗口则通过window.opener来获取A窗口的变量属性，比如上文中测试窗口中的示例代码

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
		<a href="http://www.baidu.com" target="newwin">打开百度</a>        
		<script type="text/javascript">			
			// 通过sub_window访问子窗口变量属性
			// 使用该方法打开窗口时，需要注意浏览器是否禁止打开子窗口
			sub_window = window.open("06.1.0测试窗口.html", "newwin", "height=300, width=300, top=0, left=0")
			sub_window.document.write("hello world")		
		</script>
	</body>
</html>

2.1.3.location属性

方法名	说明
location.replace(url)	改变位置但是不会留下历史记录，用户不能返回到前一个页面
location.reload()	从浏览器内存中重载当前页面
location.reload(true)	从服务器上重新加载当前url

window.location的组成：

组成	说明	举例
host/hostname	服务器名，可以使用ip，域名，主机名。host不包含端口号，hostname包含端口号	127.0.0.1/127.0.0.1:8848
href	表示 url 全部内容链接	http://127.0.0.1:8848/javascipt/06_BOM/01_location.html?q=1&p=2&l=3#name1
pathname	表示端口号后面的内容	/javascipt基础/06_BOM对象模型/06.1.3.location属性.html
port	端口号	比如下文中的 8848，如果是80端口可以省略
protocol	请求协议	http/https
origin	相当于 protocol + hostname	http://127.0.0.1:8848
search	url中？后面的键值对部分	比如下文中的?q=1&p=2&l=3
hash	url中的锚点值	比如下面的#name1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				height: 1000px;
				border: 1px solid #f00;
			}
		</style>
	</head>
	<a href="#name1">name1</a>
	<div class="container">
		
	</div>
	<!-- 站内锚点 -->
	<a name="name1" />
	<p>想访问这里</p>
	<body>
		<script type="text/javascript">
			// http://127.0.0.1:8848/javascipt基础/06_BOM对象模型/06.1.3.location属性.html
			// http://127.0.0.1:8848/javascipt基础/06_BOM对象模型/06.1.3.location属性.html?q=1&p=2&l=3#name1
			url = window.location		   
			for (i in url){
				console.log(i,"=>", url[i])
			}			
		</script>
	</body>
</html>

2.1.4.窗口对话框

方法名	说明
alert(message)	警告对话框，显示message，如果message是字符串以外类型，先转换为sring类型
confirm(question)	询问对话框，显示question，同时提供OK与Cancel按钮，用户点击OK，返回true，点击Cancle返回false
prompt(question， default)	提示框，显示question，与一个文本框，可以提供一个default输入，用户点击OK，返回输入值，否则返回null

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="" onclick='javascript:
								if (confirm("您确定要删除吗？")){
									alert("删除")
								}'>删除</a>
			
			<a href="" onclick="javascript:
			                     if (prompt('请输入您的年龄', 17)<18){
									 alert('18岁以下需要家长陪同观看')
									 return false
								 } else {
									 alert('您是成年人了，自己把控')
								 } 
								 ">18岁以下禁止观看</a>	
								
		<script type="text/javascript">
		   
		   // alert([1,2,3,45,6])
		    
			function test(){
				a=0
				while (a<10){
					alert("您真的要走么")
					a++
				}				
			}			
			
		    // 用户点击cancel， 返回false， 确定返回true
		    if (confirm("您确定要关闭吗？")){
			 	  alert("关闭")
			}
			
			function test(){
				a = 0
				if (confirm("您确定要关闭吗？")&& a<5){
					  test()
					  a++
				}
			}		   
		   
		  age = prompt("您多大啦", 18)
		  console.log(age)
		  
		</script>
	</body>
</html>

2.2.定时器

setTimeout(func, delay)：
延迟delay毫秒后执行func，func可以是字符串也可以是函数该方法会返回一个ID，代表该定时器对象
延迟delay后，不代表立即执行func，需要等待队列中其他任务完成（浏览器是单线程运行javascript）
clearTimeout(ID)：取消该定时器

function out(){
	console.log("hello world")
}
//第一个参数是超时后执行的函数，第二个参数是延迟多少毫秒
setTimeout(out, 5000)

//setTimeout可以返回的定时器id，该id可以用于取消定时器
timeId = setTimeout(out, 10000)
// clearTimeout 取消超时定时器

setTimeout(function(){
	clearTimeout(timeId)
}, 4000)

超时间隔定时器时间等待函数执行完所有代码后再执行定时器
setInterval指定间隔时间执行，而不会等待函数执行状态

// 间隔定时器是从上一个
function out(){
	console.log("ok")
}

setInterval(out, 1000)
timeId = setInterval(out, 1000)

// 利用setTimeout也可以实现间隔定时器
//clearInterval取消间隔定时器
setTimeout(function(){clearInterval(timeId)}, 5000)

function out(){
	console.log("hello world");
	setTimeout(out, 1000);
}
setTimeout(out, 1000);

2.3.navigator对象

通过navigator对象可以识别浏览器客户端相关信息
通过搜集navigator信息可以获知网站用户的上网信息，比如浏览器版本，系统平台，使用语言，浏览器插件等等

navigator对象提供了用户浏览器的代理信息，包含了用户的系统信息，浏览器信息。
通常用来判定客户端类型，比如pc还是移动，window还是mac
其中的userAgent通常都是爬虫需要设置的头信息

for (i in navigator){
	console.log(i,"=>", navigator[i])
}

function isPc() {
  var userAgentInfo = navigator.userAgent;
  var Agents = ["Android", "iPhone",
		"SymbianOS", "Windows Phone",
		"iPad", "iPod"];
  var flag = true;
  for (var v = 0; v < Agents.length; v++) {
	if (userAgentInfo.indexOf(Agents[v]) > 0) {
	  flag = false;
	  break;
	}
  }
  return flag;
}

2.4.history对象

history对象记录着用户的历史访问记录，但是开发人员无法获得具体的历史记录信息
可以实现前进与后退控制：

方法	说明
history.go(n)	当n为正，历史记录向前n的记录，为负，历史记录向后n的记录
history.go(-1)	后退一页
history.go(1)	前进一页
history.go(url)	跳到最近的包含url的历史记录
history.back()	后退
history.forward()	前进