BOM对象

最新推荐文章于 2024-08-15 18:19:19 发布

李花花12138

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量212

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_62230186/article/details/124827103

版权

常用的全局方法:

1、window是全局顶层对象默认可省略。

如alert（警告）、comfirm（确认）、prompt（弹出输入框）等；

window.alert('niaho!');
alert('niaho!');

2、var声明的全局变量，也可通过window访问；没有经过var声明的变量也能用window访问。

var a = 1;
alert(window.a);
b = 10;
alert(window.b);

3、id命名的元素可用window直接访问。

<h1 id="h1">你好！</h1>
document.write(window.h1.innerText);

4、定时器也是全局方法。

var num = 1;
window.setInterval(function(){
    num++;
    console.log(num);
},1000)

screen屏幕对象：

1、屏幕的宽高

document.write('屏幕的宽' + screen.width + '&nbsp' + '&nbsp');
document.write('屏幕的高' + screen.height + '&nbsp' + '&nbsp');

2、可用屏幕的宽高

document.write('可用屏幕宽' + screen.availWidth + '&nbsp' + '&nbsp');
document.write('可用屏幕高' + screen.availHeight + '&nbsp' + '&nbsp');

3、浏览器可视区域宽高

document.write('浏览器可视区域宽' + window.innerWidth + '&nbsp' + '&nbsp');
document.write('浏览器可视区域高' + window.innerHeight + '&nbsp' + '&nbsp');

历史记录对象：

1、实现前进

<button type="button" onclick="goForward()">前进</button>
function goForward(){
				history.forward();//history.go(step)向前步数
			}

2、实现后退

<button type="button" onclick="goBcak()">返回</button> 
function goBcak(){
				history.back();//history.go(-step)后退步数（负数值）
			 }

location地址栏信息：

1、刷新

<button type="button" onclick="reload()">刷新</button> 
function reload(){
				location.reload();//普通刷新
            }

//强制刷新并更新缓存：location.reload(true);

2、location地址栏信息

document.write("<br/>当前地址信息：" + location.href);//当前浏览器路径
document.write("<br/>协议：" + location.protocol);//http：
document.write("<br/>域名：" +location.hostname);//127.0.0.8
document.write("<br/>路径：" + location.pathname);//：8888
document.write("<br/>端口号：" + location.port);//JavaScript/index.html
document.write("<br/>查询：" + location.search);//?后可加内容
document.write("<br/>哈希/锚点：" + location.hash);//#锚点

3、跳转

<button type="button" onclick="change()">跳转</button>
function change(){
				location.href = "https://www.baidu.com";
			}

navigator浏览器对象:

1、判断浏览器类型

var ua = navigator.userAgent;
document.write("<br/>" + ua);

2、检测浏览器是否为手机

 if(ua.includes("Mobile")){
document.write("<br/>手机浏览器");
}else {
document.write("<br/>PC浏览器");
 }

open方法：

1、打开窗口

<button type="button" onclick="openWin()">打开窗口</button>
function openWin(){
 window.open("https://www.baidu.com","baidu","width=600,height=400,top=500,left=600");
}

2、关闭窗口

<button type="button" onclick="closeWin()">关闭打开窗口</button> 
var win;
function openWin(){
win = window.open("https://www.baidu.com","baidu","width=600,height=400,top=500,left=600");
}
function closeWin(){
	win.close();
 }

Windows的常用事件：

1、onload，图片加载后触发

window.onload = function(){
	alert(h1.innerText);
}
<body>
   <h1 id="h1">你好！</h1>
</body>

2、onscroll，页面滚动

window.onscroll = function(){
console.log("页面滚动");
var t = document.documentElement.scrollTop;//滚动条滚动执行function
	console.log(t);
 }

3、onresize，当窗口发生大小变化时，向页面写入窗口可视区域宽高

window.onresize = function(){
console.log("窗口大小变化");
console.log("<br/>宽"+window.innerWidth+",宽"+window.innerHeight);
}

字符串编码：

1、encodeURI，把字符串转为浏览器地址可以识别的字符；默认不会转义标点符号

var str = ",!";
console.log(window.encodeURIComponent(str));//encodeURIComponent，会转义标点符号

2、decodeURI/decodeURIComponent,把url编码的字符转换为普通字符串

var str = ",!";
console.log(window.decodeURIComponent(str));

图片预览：

img.src = window.URL.createObjectURL(图片文件)

<input type="file" name="" id="myf" value="" onchange="preImg" /> 
<img src="" width="50%" id="mypic" />
function preImg(){
			var file  = myf.files[0];
			var src = window.URL.createObjectURL(file);
			myfpic.src = src;
			}

李花花12138

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM对象

常用的全局方法:1、window是全局顶层对象默认可省略。如alert（警告）、comfirm（确认）、prompt（弹出输入框）等；window.alert('niaho!');alert('niaho!');2、var声明的全局变量，也可通过window访问；没有经过var声明的变量也能用window访问。var a = 1;alert(window.a);b = 10;alert(window.b);3、id命名的元素可用window直接访问。<h1 i
复制链接

扫一扫