javascript BOM 相关知识（详细）

punching_a

已于 2022-08-11 21:01:26 修改

阅读量228

点赞数 1

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

于 2022-08-11 20:48:31 首次发布

本文链接：https://blog.csdn.net/m0_72259367/article/details/126292736

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

BOM:browser object model 浏览器对象模型

bom的属性

screen

width height availWidth(可用宽度) availHeight(可用高度)

navigator

userAgent：获取浏览器信息

location

href:获取url

host: IP+端口

hostname：IP

port:端口

pathname:项目路径

search:获取url后的参数

reload() 刷新-缓存

reload(true) 刷新-浏览器

history

forward() 前进

back() 后退

go(number) 前进/后退

编码：

编码:encodeURI(str) encodeURIcomponent(str)

解码:decodeURI(str) decodeURIcomponent(str)

base64编码

atob(str)

btoa(str)

打开新标签页

超链接

location.href="url"

window.open("url","_blank","窗口特征")

window.close()

bom相关案例

1、bom属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="location.reload();">刷新-缓存</button>
		<!-- <button onclick="location.reload(true);">刷新-服务器</button> -->
		<a href="2、history.html">history</a>
		<script>
			console.log(window.screen.width);//获取屏幕宽度
			console.log(screen.height);//获取屏幕高度
			//去掉底部边栏
			console.log(screen.availWidth);//获取屏幕可用宽度
			console.log(screen.availHeight);//获取屏幕可用高度
			// Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
			// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
			console.log(navigator.userAgent);
			console.log(navigator.userAgent.includes(".NET"));  //判断是否是IE
			
			
			console.log(location.href);  //返回当前的url
			console.log(location.host);  //IP+端口
			console.log(location.hostname);  //IP
			console.log(location.port);  //端口
			console.log(location.pathname);  //项目文件所在的路径
			console.log(location.search);  //获取URL后的参数
			
			
		</script>
	</body>
</html>

运行结果截图：

2、history相关属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<button onclick="history.forward()">前进</button>
		<button onclick="history.back()">后退</button>
		<button onclick="history.go(1)">前进一个页面</button>
		<button onclick="history.go(-1)">后退一个页面</button>
		<script></script>
	</body>
</html>

运行结果截图：

3、打开一个新窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		    target="_self"  覆盖当前页
		    target="_blank"  打开新的标签页
		 -->
		<a target="_blank" href="2、history.html">history</a>
		<a href="#" onclick="gobaidu()">百度</a>
		<button onclick="openwin()">打开新窗口</button>
		<script>
			function gobaidu(){
				location.href="http://www.baidu.com"
			}
			function openwin(){
				// window.open("url","_self/_blank","窗口特征")
				window.open("http://www.baidu.com","_blank"
				,"width=500 height=500 left=300 top=300")
			}
			
		// function gobaidu(){
		// 	locationbar.href="http://www.baidu.com"
		// }
		// function openwin(){
		// 	window.open("http://www.baidu.com","_blank")
		// 	,"width=500 height=500 left=300 top=300"
		// }
		</script>
	</body>
</html>

运行结果截图：

4、编码方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//编码
			var str=encodeURI("http://127.0.0.1:8848/workspace/js/8、BOM/3、打开新窗口.html");
			console.log(str);
		    //解码
			var str2=decodeURI(str);
			console.log(str2);
			
			//编码
			var str=encodeURIComponent("http://127.0.0.1:8848/workspace/js/8、BOM/3、打开新窗口.html");
			console.log(str);
			//解码
			var str2=decodeURIComponent(str);
			console.log(str2);
			
			console.log(decodeURI("https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js%E8%BD%AE%E6%92%AD%E5%9B%BE&fenlei=256&oq=html&rsv_pq=c4286e910000310f&rsv_t=275cafjslHI5Srp03amgRn4N%2BOSGULNB7RBavVsLRptnRGmIPVkalrNhisM&rqlang=cn&rsv_enter=0&rsv_dl=ts_0&rsv_btype=t&rsv_sug3=23&rsv_sug1=28&rsv_sug7=101&rsv_sug2=1&prefixsug=js%2520lunbo&rsp=0&inputT=11143&rsv_sug4=11705"));
			var str3="chen";
			console.log(atob(str3));  //ª).
			console.log(btoa("r§"));
		</script>
	</body>
</html>

运行结果截图：

5、图片预览

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- this:指代当前节点对象 -->
		<input type="file" id="tag1" accept="image/jpeg,image/png,image/gif" onchange="switchImg(this)" />
		<img src=""  id="img">
		<script type="text/javascript">
		 // var _tag=document.getElementById("tag1");
		  var _img=document.getElementById("img");
			function switchImg(tag){
				//1、获取上传的文件对象
				var file=tag.files[0];
				//2、读取文件流
				var fr=new FileReader();
				//3、读取文件
				fr.readAsDataURL(file);
				fr.onload=function(){
					console.log(fr.result);
					_img.src=fr.result;
				}
			}
		</script>
	</body>
</html>

运行结果截图：

punching_a

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript BOM 相关知识（详细）

width height availWidth(可用宽度) availHeight(可用高度)编码:encodeURI(str) encodeURIcomponent(str)解码:decodeURI(str) decodeURIcomponent(str)window.open("url","_blank","窗口特征")reload(true) 刷新-浏览器。go(number) 前进/后退。reload() 刷新-缓存。2、history相关属性。forward() 前进。href:获取url。...
复制链接

扫一扫

专栏目录