BOM相关内容

最新推荐文章于 2024-07-12 16:31:27 发布

qq_45639294

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量125

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_45639294/article/details/120300873

版权

window简介

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

1.窗口位置

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持)

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性。

2.窗口大小

innerWidth 页面视图区的宽度

innerHeight 页面视图区的高度

outerWidth 浏览器窗口的宽度

outerHeight 浏览器窗口的高度

所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

3. scrren对象

屏幕总宽度/高度:

screen.width

screen.height

可用宽度/高度:

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率:

screen.pixelDepth

4.导航和打开窗口

window.open()

可以导航到一个特定的URL，也可以打开一个新的浏览器窗口,该方法会返回一个指向新窗口的引用。引用的对象与其他的window对象类似。

参数：

1)要加载的URL

2)窗口目标,框架名

特殊名：

_self 当前浏览器页面

_parent 当前页面父页面

_top 当前页面顶级页面

_blank 新页面

3) 一个特定字符串

是用逗号分隔的设置字符串

channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器

directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器

fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器

width=pixels 窗口的宽度.最小.值为100

height=pixels 窗口的高度。最小.值为100

left=pixels 该窗口的左侧位置

location=yes|no|1|0 是否显示地址字段.默认值是yes

menubar=yes|no|1|0 是否显示菜单栏.默认值是yes

resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes

scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes

status=yes|no|1|0 是否要添加一个状态栏.默认值是yes

titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes

toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes

top=pixels 窗口顶部的位置.仅限IE浏览器

4)表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

如果传递了第二个参数，而且该参数是已有窗口或框架的名称，就会在具有该名称的窗口或框架中加载第一个参数指定的URL。

如果给window.open传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页

调整窗口大小

//调整到100*100

resizeTo(100,100);//接受浏览器窗口的新高度和新宽度

//调整到200*150

resizeBy(100,50); //接受新窗口与原窗口的宽度和高度之差

//调整到300*300

resizeTo(300,300)

移动窗体

多用于新建窗体

window.moveTo(0,0); 接受的是新位置的x和y坐标值

window.moveBy(0,100);接受的是在水平和垂直方向上移动的像素值。

滚动条

scrollBy(xnum,ynum) 方法可把内容滚动指定的像素数。注意：要使此方法工作 window 滚动条的可见属性必须设置为true！

scrollTo(xpos,ypos) 方法可把内容滚动到指定的坐标。

例如：

创建新窗体

var w = window.open("http://www.baidu.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");

改变窗体大小

w.resizeTo(400,200);

vi 1-bom-screen.html ：填充<script>代码

<!DOCTYPE html>

<head>

<title>screen</title>

div{

height: 4000px;

width: 4000px;

background-color: #ccc;

margin:20px;

}

color: #3d7e9a;

text-decoration: none;

cursor: pointer;

}

</style>

//浏览器对象模型 Browser Object Model BOM

//Window 构造函数

//window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码

//window.document window.console window.location window.history

//https://developer.mozilla.org/zh-CN/docs/Web/API/Window

console.log(window)

//当资源已加载时被触发

window.onload = function(){

alert("hello~~~")

console.log("非IE9以下,对屏幕左上角的距离",screenX,screenY);

console.log("非IE9以下,对屏幕左上角的距离",pageXOffset,pageYOffset);//为了跨浏览器兼容性

//console.log("IE9以下,对屏幕左上角的距离",screenLeft,screenTop);

console.log("IE9以下,对屏幕左上角的距离",document.body.scrollLeft,document.body.scrollTop);

// 视图区的大小获得浏览器窗口的内容区域的高度，包含水平滚动条(如果有的话)。

console.log("视图区的大小",innerWidth,innerHeight);

console.log("浏览器窗口的大小",outerWidth,outerHeight);

console.log("屏幕大小",screen.width,screen.height);

console.log("屏幕有效大小",screen.availWidth,screen.availHeight);

//window.history时加上：

var a = document.links[0];

a.onclick = function(){

console.log(history.back());

}

//window.open

var button = document.getElementsByTagName("button")[0];

button.onclick = function(){

// 进行页面跳转

//__blank:每次调用 window.open()时都打开一个新窗口

//resizable,scrollbars,status

var w = window.open("./1-bom-screen.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes, width=100, height=100");

console.log(w);

// 达到指定大小

w.resizeTo(200,500);

// 增加或者减少

w.resizeBy(200,500);

// 移动窗口的位置

w.moveTo(400,400);

w.moveBy(400,400);

}

</script>

</head>

<body>

<a href="#">跳转到上一个 </a>> 当前页面

</body>

</html>

系统对话框

系统对话框

alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。

alert() 该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息

confirm() 确认对话框，显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值，true表示单击了OK，false表示单击cancel 或者关闭按钮

prompt() 会话框，提示用户输入一些文本。显示包含文本，ok按钮,cancel按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数，要显示给用户的文本提示和文本输入域的默认值。

如果用户单击OK按钮，该方法返回输入域的值，如果用户单击了 Cancel或者关闭对话框该方法返回null

var result1 = alert("告警框:通知信息给客户");

console.log(result1);//undefined

var result2 = confirm("对话框：确认是否要删除吗？");

console.log(result2);//boolean true确认/false取消

if(result2){

console.log("删除操作")

}

var result3 = prompt("会话框，请问贵姓？","张")

//问题？文本框的展示的默认值

console.log(result3);//string填写文本框确定 null取

location对象

location对象

是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location是个神奇的对象，既是window的对象也是document的对象。

console.log(window.location == document.location);//true

location window.location document.location

属性：

host 返回服务器名称和端口号

hostname 返回不带端口号的服务器名称

href 返回当前加载页面的完整URL

pathname 返回URL的目录和文件名

port 返回URL中指定的端口号

protocol 返回页面使用的协议

search 返回URL的查询字符串。这个字符串以问号开头

方法：

assign() 传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace() 参数为一个url,结果会导致浏览器位置改变，但不会在历史记录中生成新记录

reload() 重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载

为location.href; window.location 设置为一个URL值，也会以该值调用assign()方法。以下三句话效果一样

window.location="http://www.baidu.com";

location.href="http://www.baidu.com"

location.assign("http://www.baidu.com");

vi 2-location.html:填补<script>代码

<!DOCTYPE html>

<head>

<title>location</title>

<style>

div{

width: 500px;

margin: 200px auto;

}

button{

display: inline-block;

cursor: pointer;

width: 108px;

height: 44px;

padding: 0;

background: 0 0;

background-color: rgba(0, 0, 0, 0);

background-color: #1890ff;

border-radius:10px;

font-size: 17px;

color: #fff;

box-shadow: none;

font-weight: 400;

border: none;

outline: 0;

margin-right: 10px;

}

</style>

window.onload = function(){

console.log(location);

console.log(window.location===document.location);//true

console.log("完整的URL",location.href,document.baseURI);

console.log("协议",location.protocol);

console.log("服务器的名称和端口号",location.host,location.hostname,location.port);

console.log("URL的目录和文件名",location.pathname);

console.log("URL的查询字符串",location.search);

var button = document.getElementsByTagName("button");

button[0].onclick = function(){

//打开新url，并在浏览记录中生成一条记录。

//window.location="./1-bom-screen.html";

//location.href = "./1-bom-screen.html";

//location.assign("./1-bom-screen.html");

//打开新url，但不会在历史记录中生成新记录

location.replace("./1-bom-screen.html");

// reload不需要参数，对当前页面进行重新加载，参数为true的话，是需要从服务器上加载的，如果是false的话，直接从缓存中拿

location.reload();

}

</script>

</head>

<body>

</body>

</html>

history对象

history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

length 返回历史列表中的网址数。注意：IE和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back() 加载 history 列表中的前一个 URL

forward() 加载 history 列表中的下一个 URL

go() 加载 history 列表中的某个具体页面，负数表示向上几页跳转，正数表示下几页跳转

vi 3-history.html:填补<script>代码,浏览器一个窗口多打开几个地址，模拟出历史记录

<!DOCTYPE html>

<head>

<title>history</title>

<style>

div{

width: 500px;

margin: 300px auto;

}

button{

display: inline-block;

cursor: pointer;

width: 108px;

height: 44px;

padding: 0;

background: 0 0;

background-color: rgba(0, 0, 0, 0);

background-color: #1890ff;

border-radius:10px;

font-size: 17px;

color: #fff;

box-shadow: none;

font-weight: 400;

border: none;

outline: 0;

margin-right: 10px;

}

</style>

window.onload = function(){

console.log(history,window.history,history.length);

back() 加载 history 列表中的前一个 URL

forward() 加载 history 列表中的下一个 URL

go() 加载 history 列表中的某个具体页面

负数表示向后跳转，正数表示向前跳转

var button = document.getElementsByTagName("button");

button[0].onclick = function(){

//history.back();

history.go(-1);

}

button[1].onclick = function(){

//history.go(1);

history.forward();

}

button[2].onclick = function(){

history.go(-3);

}

button[3].onclick = function(){

history.go(2);

}

</script>

</head>

<body>

<div>

<button>返回上一个</button>

<button>返回下一个</button>

<button>返回上三个</button>

<button>返回下二个</button>

</div>

</body>

</html>

超时调用和间歇调用

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行

setTimeout() 超时调用

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

参数：

1.要执行的代码

2.以毫秒表示的时间

例如: 一秒后调用

var id = setTimeout(function(){

alert(1000);

},1000);

console.log(id);

clearTimeout(id) //清除

setInterval() 间歇调用

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以让用户在将来某个时刻取消间歇调用

参数：

1.要执行的代码

2.以毫秒表示的时间

clearInterval(ID); //取消间歇调用

vi 4-setTimeout-setInterval.html:填补<script>代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>超时调用和间歇调用</title>

<style>

div{

width: 500px;

margin: 100px auto;

}

button{

display: inline-block;

cursor: pointer;

width: 108px;

height: 44px;

padding: 0;

background: 0 0;

background-color: rgba(0, 0, 0, 0);

background-color: #1890ff;

border-radius:10px;

font-size: 17px;

color: #fff;

box-shadow: none;

font-weight: 400;

border: none;

outline: 0;

margin-right: 10px;

}

</style>

window.onload = function(){

var p=document.getElementsByTagName("p")[0];

function show(){

p.innerHTML += Math.random()+"hello<br>";

}

//超时调用:执行的代码，毫秒之后

var t1=setTimeout(show,5000);

//间歇调用：执行的代码，每毫秒

//setInterval(test,1000);

var t2=setInterval(function(){

p.innerHTML += Math.random()+"world<br>";

},1000);

var btns = document.getElementsByTagName("button");

//停止超时调用

btns[0].onclick = function(){

clearTimeout(t1);

p.innerHTML += "超时调用停止成功<br>";

}

//停止间歇调用

btns[1].onclick = function(){

clearInterval(t2);

p.innerHTML += "间歇调用停止成功<br>";

}

有一个函数每调用一次将输出一个数字

使用间歇调用方式调用十次fint函数输出1~10

使用超时调用方式调用十次fout函数输出100~105

隐藏含义：数字11时停止间歇调用，数字106时停止超时调用

//使用间歇调用方式

var numInt = 0;

var timeInt = null;

function fint(){

numInt++;

p.innerHTML += "<h6>间歇调用fin:"+numInt+"</h6>";

if(numInt>=10){

clearInterval(timeInt);

p.innerHTML +="<h6>间歇调用fin停止成功</h6>";

}

timeInt = setInterval(fint,100);

//使用超时调用模拟间歇调用

var numOut = 100;

function fout(){

p.innerHTML += "<h6>超时调用fout:"+numOut+"</h6>";

if(numOut<105){

setTimeout(fout,100);

}else{

p.innerHTML +="<h6>超时调用fout停止成功</h6>";

}

numOut++;

}

setTimeout(fout,100);

}

</script>

</head>

<body>

<div>

<button>停止超时调用</button>

<button>停止间歇调用</button>

</div>

</body>

</html>

使用超时调用来模拟间歇调用

var num = 0;

var max = 10;

function incrementNum(){

num ++;

if(num < max){

alert(num);

setTimeout(incrementNum,500);

}else{

alert("Done"+num);

}

setTimeout(incrementNum,500);

setTimeout，setInterval配合完成调用函数

function invoke(f,start,interval,end){

if(!start){start = 0;}

if(arguments.length<=2){

setTimeout(f,start);

}else {

function repeat(){

var h = setInterval(f,interval);

if(end){

setTimeout(function(){

clearInterval(h);

},end);

}

setTimeout(repeat,start);

}

vi 5-count-down/indexhtm.l:填补<script>代码

<!DOCTYPE HTML>

<head>

<title>竣工倒计时</title>

</head>

<body>

<h1>Coming Soon Page</h1>

<p>Stay tuned for something amazing</p>

</div>

<div>

</div>

<div>

</div>

<div>

<span class="simply-word">minutes</span>

</div>

<div>

<span class="simply-word">seconds</span>

</div>

</div>

</div>

<p>Beijing Time</p>

2022年09月02日 09:15:00

</p>

</div>

//背景时间能自动每秒刷新id="now"

//倒计时能自动每秒刷新class="simply-amount"

//点击倒计时矩形框class="simply-section"弹出会话框可以重新设置倒计时对应的天数days/小时hour/分钟minutes/秒数seconds

//背景时间能自动每秒刷新id="now"

var now=document.getElementById("now");

setInterval(function(){

now.innerHTML=moment().format('YYYY年MM月DD日 HH:mm:ss');

},1000);

//倒计时能自动每秒刷新class="simply-amount"

var daysEle=document.getElementsByClassName("simply-amount").item(0);

var hourEle=document.getElementsByClassName("simply-amount").item(1);

var minEle=document.getElementsByClassName("simply-amount").item(2);

var secEle=document.getElementsByClassName("simply-amount").item(3);

var timeInt=setInterval(countDown,1000);

function countDown(){

var days=parseInt(daysEle.innerHTML);

var hour=parseInt(hourEle.innerHTML);

var min=Number(minEle.innerHTML);

var sec=Number(secEle.innerHTML);

sec--;

if(sec<0 && (min>0 || hour>0 || days>0)){

sec=59;

min--;

}

if(min<0 && (hour>0 || days>0)){

min=59;

hour--;

}

if(hour<0 && days>0){

hour=23;

days--;

}

daysEle.innerHTML=days;

hourEle.innerHTML=hour;

minEle.innerHTML=min;

secEle.innerHTML=sec;

if(days+hour+min+sec <=0){

clearInterval(timeInt);

alert("倒计时结束~大桥竣工啦！");

}

//点击倒计时矩形框class="simply-section"弹出会话框可以重新设置倒计时对应的天数days/小时hour/分钟minutes/秒数seconds

var divs=document.getElementsByClassName("simply-section");

for(var i=0;i<divs.length;i++){

divs[i].οnclick=function(e){

console.log(e.currentTarget.firstElementChild.firstElementChild);

var num=window.prompt("请重新输入倒计时的"+e.currentTarget.firstElementChild.lastElementChild.innerHTML,e.currentTarget.firstElementChild.firstElementChild.innerHTML);

if(num && parseInt(num)>=0){

clearInterval(timeInt);

e.currentTarget.firstElementChild.firstElementChild.innerHTML=num;

timeInt=setInterval(countDown,1000);

}

</script>

</body>

</html>

qq_45639294

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM相关内容

window简介BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。1.窗口位置screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。(ie...
复制链接

扫一扫