BOM(浏览器对象模型)的常用操作

最新推荐文章于 2023-03-18 12:35:52 发布

I'm Mr.C

最新推荐文章于 2023-03-18 12:35:52 发布

阅读量303

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44849271/article/details/107774583

版权

JavaScript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

BOM的常用操作

BOM的全称是Browser Object Model，即浏览器对象模型。简单来说操作BOM就可以操作浏览器。

BOM操作就是用js控制浏览器

window操作

window.innerHeight——浏览器窗口内部高度
window.innerWidth——浏览器窗口内部宽度
—————————————————————————————————
值得注意的是IE8以下不支持新的写法
document.body.clientHeight——浏览器窗口内部高度
document.body.clientWidth——浏览器窗口内部宽度

let window_height=window.innerHeight;
let window_width=window.innerWidth;
console.log("浏览器内部高度："+window_height+"，浏览器内部宽度："+window_width);

window的其他操作

window.open(“URL”);//打开新窗口
window.close();//关闭当前窗口
window.moveTo(X轴,Y轴);//移动当前窗口
window.resizeTo(Width,Height);//调整当前窗口尺寸
window.resizeBy(Width,Height);//为当前窗口增加尺寸

例子

window.open(“URL”);
window.close();

<body>
	<button>OPEN</button>
	<button>CLOSE</button>
	<script>
		let btn_open=document.getElementsByTagName("button")[0];
		let btn_close=document.getElementsByTagName("button")[1];
		btn_open.onclick=()=>{
			//点击按钮打开百度
			window.open("http://www.baidu.com");
		}
		btn_close.onclick=()=>{
			//点击按钮关闭当前页面
			window.close();
		}
	</script>
</body>

navigator操作

navigator.appName;——浏览器的名称
navigator.appVersion;——浏览器的版本
navigator.language;——浏览器的文字语言
navigator.platform;——操作系统的类型
navigator.userAgent;——浏览器设定的User—Agent字符串

例子

let btn=document.getElementsByTagName('button')[0];
        console.log(this)
        btn.onclick=()=>{
            let appname=window.navigator.appName;
            let appversion=window.navigator.appVersion;
            let applanguage=window.navigator.language;
            let platform=window.navigator.platform;
            let useragent=window.navigator.useragent;
            console.log(appname, appversion, applanguage, platform, userAgent);
        }
        //输出Netscape 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.26 Safari/537.36 zh-CN Win32 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.26 Safari/537.36

screent操作

screen.width;——电脑屏幕的宽度，以像素为单位
screen.availWidth;——电脑屏幕的可用宽度，以像素为单位
screen.height;——电脑屏幕的高度，以像素为单位
screen.availHeight;——电脑屏幕的可用高度，以像素为单位
screen.colorDepth;——颜色位数

例子

let btn=document.getElementsByTagName('button')[0];
        console.log(this)
        btn.onclick=()=>{
            let width=window.screen.width;
            let availWidth=window.screen.availWidth;
            let height=window.screen.height;
            let availHeight=window.screen.availHeight;
            let colorDepth=window.screen.colorDepth;
            console.log(width,availWidth,height,availHeight,colorDepth);
        }
//输出1536 1536 864 824 24

Location操作

location.protocol;——URL的协议
location.host;——服务器域名或者IP地址
location.port;——服务器端口号
location.pathname;——服务器中该文件的路径
location.search;——URL中的数据(?name=xiaomin&age=18)
location.hash;——URL中锚点的链接

let btn=document.getElementsByTagName('button')[0];
        console.log(this)
        btn.onclick=()=>{
            let pro=window.location.protocol;
            let host=window.location.host;
            let port=window.location.port;
            let path=window.location.pathname;
            let search=window.location.search;
            let hash=window.location.hash;
            console.log(pro,host,port,path,search,hash);
        }

history操作

history.back();——返回历史记录中的上一个，回退到上一个页面
history.forward();——前进到历史记录的下一个页面
history.go(2);——前进到历史记录的下两个页面（正数为前进到指定页面，负数则是回退到指定页面，0为刷新页面）

window.history.back();
window.history.forward();
window.history.go(3);

I'm Mr.C

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BOM(浏览器对象模型)的常用操作

BOM的常用操作BOM的全称是Browser Object Model，即浏览器对象模型。简单来说操作BOM就可以操作浏览器。BOM操作就是用js控制浏览器目录BOM的常用操作window操作window操作window.innerHeight——浏览器窗口内部高度window.innerWidth——浏览器窗口内部宽度—————————————————————————————————值得注意的是IE8以下不支持新的写法document.body.clientHeight——浏览器窗
复制链接

扫一扫