BOM对象

aaaaaaaallllll653

已于 2024-09-25 18:49:35 修改

阅读量920

点赞数 21

文章标签：前端

于 2024-09-25 18:46:16 首次发布

本文链接：https://blog.csdn.net/aaaaaaaallllll/article/details/142530296

版权

BOM对象

ECMAScript + BOM + DOM

BOM（Browser Object Model）浏览器对象模型 BOM 使 JavaScript 有能力与浏览器“对话” BOM尚无正式标准,但是浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性（window）

window对象

表示浏览器窗口，所有浏览器都支持 window 对象
所有 JavaScript 全局的对象、函数以及变量均自动成为 window 对象的成员[属性和方法]
全局变量是 window 对象的属性
全局函数是 window 对象的方法
window对象是BOM模型中的顶层对象，因此所有BOM模型中的对象都是该对象的子对象
HTML DOM 的 document 也是 window 对象的属性之一

子对象	作用
document	文档对象用于操作页面元素
location	地址对象用于操作URL地址
navigator	浏览器对象用于获取浏览器版本信息
history	历史对象用于操作浏览器历史
screen	屏幕对象用于操作屏幕的高度和宽度

属性

属性名	说明
closed	返回一个布尔值，用于判断窗口是否已经关闭。

window对象的所有子对象都是window对象的属性
所有的全局变量也都是 window 对象的属性

方法

窗口控制

方法名	说明
open([url],[_blank],[width	height
close()	关闭当前页面
moveTo(x,y)	移动窗口到指定坐标
moveBy(x,y)	相对当前位置移动
resizeTo(x,y)	窗口大小调整到指定宽高
resizeBy(+w,+h)(可以是正、负数值)	窗口大小增减宽高

<input type="button" value="打开窗口" name="" id="" onclick="openWin()">
<input type="button" value="关闭窗口" name="" id="" onclick="closeWin()">
<input type="button" value="判断窗口" name="" id="" onclick="panduanWin()">
<input type="button" value="移动窗口" name="" id="" onclick="moveWin()">
<input type="button" value="调整窗口大小" name="" id="" onclick="resizeWin()">
<script>
  function openWin(){
        // myWindow = window.open('http://www.baidu.com','',"width=500,height=500,top=100,left=100");
        // window.open('','',"width=200,height=200");
        // window.open('','',"width=500,height=500,top=100,left=100");
        myWindow = window.open('','',"width=500,height=500,top=200,left=200");
        myWindow.document.write('hello world');
  }
    function closeWin(){
        // 注意: 接收一个打开的窗口的名字
        myWindow.close();

    }
    function panduanWin(){
        // 能够判断窗口的状态是关闭的还是打开的
        // false=没有关闭  true=关闭
        console.log(myWindow.closed);
    }
    function moveWin(){
        // moveTo(x,y) x,y 只能为正值
        // moveBy(100,-100) 当前坐标的基础 + 100,-100
        myWindow.moveBy(-100,100);
    }
    function resizeWin(){
        // resizeTo(x,y) x,y 只能为正值
        // resizeBy(100,-100) 当前坐标的基础 + 100,-100
        // myWindow.resizeTo(100,100);
        myWindow.resizeBy(-100,-100);
    }
</script><input type="button" value="打开窗口" name="" id="" onclick="openWin()">
<input type="button" value="关闭窗口" name="" id="" onclick="closeWin()">
<input type="button" value="判断窗口" name="" id="" onclick="panduanWin()">
<input type="button" value="移动窗口" name="" id="" onclick="moveWin()">
<input type="button" value="调整窗口大小" name="" id="" onclick="resizeWin()">
<script>
  function openWin(){
        // myWindow = window.open('http://www.baidu.com','',"width=500,height=500,top=100,left=100");
        // window.open('','',"width=200,height=200");
        // window.open('','',"width=500,height=500,top=100,left=100");
        myWindow = window.open('','',"width=500,height=500,top=200,left=200");
        myWindow.document.write('hello world');
  }
    function closeWin(){
        // 注意: 接收一个打开的窗口的名字
        myWindow.close();

    }
    function panduanWin(){
        // 能够判断窗口的状态是关闭的还是打开的
        // false=没有关闭  true=关闭
        console.log(myWindow.closed);
    }
    function moveWin(){
        // moveTo(x,y) x,y 只能为正值
        // moveBy(100,-100) 当前坐标的基础 + 100,-100
        myWindow.moveBy(-100,100);
    }
    function resizeWin(){
        // resizeTo(x,y) x,y 只能为正值
        // resizeBy(100,-100) 当前坐标的基础 + 100,-100
        // myWindow.resizeTo(100,100);
        myWindow.resizeBy(-100,-100);
    }
</script>

注意：在使用moveTo，moveBy，resizeTo，resezeBy的时候，打开的窗口必须是自己的窗口，不能使用百度等在线的地址，会出现跨域的错误

弹窗方法

方法名	说明
alert("信息内容")	弹出一个警告框
confirm("信息内容")	弹出一个确认对话框
prompt("信息内容",["默认输入内容"])	弹出一个提示对话框

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

任务计划

方法名	说明
setInterval("javascript语句",毫秒)	周期性执行计时器（执行多次）
clearInterval(计时器)	取消计时器
setTimeout("javascript语句",毫秒)	定时执行计时器(只执行一次)
clearTimeout(计时器)	取消计时器

location对象

location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面

属性

属性名	说明
pathname	返回当前页面的路径和文件名。
href	返回当前页面的 URL
hostname	返回域名
port	返回端口
protocol	返回协议
search	返回传值部分

实现跳转的方式：

 a1.onclick = function(){
            跳转
            window.location = "http://www.taobao.com";
            event.returnValue = false;

            replace
            location.replace('http://www.taobao.com');
            event.returnValue = false;

            location.href
            location.href = "http://www.taobao.com"
            event.returnValue = false;
        }

方法

方法名	说明
reload([true])	刷新
replace("url")	跳转到新页面

history对象

history对象是JavaScript中的一种默认对象，该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法，可以完成类似于浏览器窗口中的前进、后退等按钮的功能

属性名	说明
length	浏览器窗口的历史列表中的网页个数

方法

方法名	说明
go(num)	该方法可以直接跳转到某一个已经访问过的URL。
forward()	该方法可以前进到下一个访问过的URL,等价于go(1)
back()	该方法可以返回到上一个访问过的URL,等价于go(-1)

back()表示返回到上一页面，效果相当于go(-1);

forward()表示返回到下一页面，效果相当于go(1);

go()用于指定页的跳转，比如go(-2)表示返回到浏览过的前两个页面

history.go(0); 刷新

navigator对象

navigator对象，也称为浏览器对象，该对象包含了浏览器的整体信息，如浏览器名称、版本号等

属性名	说明
appName	返回浏览器的名称
appVersion	返回浏览器的版本号
browserLanguage	返回当前浏览器的语言。[不兼容]
platform	返回运行浏览器的操作系统或硬件平台
cookieEnabled	检测浏览器是否支持Cookie。该属性值为布尔类型，如果浏览器支持Cookie则返回true，否则返回false
userAgent	一个只读的字符串，获取浏览器用于 HTTP 请求的用户代理头的值

screen对象

screen对象是一个由JavaScript自动创建的对象，该对象的作用主要是描述客户端的显示器的信息，例如屏幕的分辨率、可用颜色数等。
screen对象是一个全局对象，该对象中存放的都是静态属性，这些属性值是只读的

属性名	说明
height	屏幕的高度，单位为像素
width	屏幕的宽度，单位为像素
colorDepth	颜色深度
availHeight	显示器可用的屏幕高度，单位为像素。（不含任务栏）
availWidth	显示器可用的屏幕宽度，单位为像素

encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab";
document.write(encodeURIComponent(uri));
// 结果：http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab