BOM常用操作

2023-10-03 18:59:52

BOM(Browser Object Model)浏览器对象模型，浏览器提供的js操作浏览器的API,BOM提供了与网页无关的浏览器的功能对象,它没有正式的标准，由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

window是BOM的*对象，它表示浏览器的窗口，window对象在浏览器中有两重身份：1.是ECMAScript中的global对象；2.是浏览器窗口的javascript接口

1.window对象
1.1窗口的位置
screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持

console.log(screenX,screenY)

1.2浏览器窗口的大小
outWidth表示浏览器窗口的宽度；
outHeight表示浏览器窗口的高度

console.log(outerWidth,outerHeight);

1.3浏览器视图区的大小
innerWidth表示浏览器视图区的宽度；
innerHeight表示浏览去视图区的高度；

console.log(innerWidth,innerHeight);

2.screen对象
2.1屏幕的总宽度和总高度

 console.log(screen.width,screen.height);

2.2屏幕可用的宽度和高度

console.log(screen.availWidth,screen.availHeight);

3.window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

window.open(URL,name,specs,replace)

4.弹窗（系统对话框）
4.1可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。
4.2lert()是警告框，只能传递一个参数

alert('未成年人不要使用')

4.3confirm()确认框返回值是布尔类型，点击确定返回true,点击取消返回flase

var res = confirm('确定吗');
        if(res){
             console.log(res);
        }else{
            console.log(res);
        }

4.4prompt()提示框，接收两个参数，要显示给用户的文本以及输入框的默认值，点击确定返回输入的文本，取消或关闭返回null

 var res = prompt('输入姓名','xxx');
        if(res){
            console.log(res);
        }else{
            console.log(res);
        }

5.lacation对象
5.1属性
host 返回服务器名称和端口号
hostname 返回不带端口号的服务器名称
href 返回当前加载页面的完整URL
pathname 返回URL的目录和文件名
port 返回URL中指定的端口号
protocol 返回页面使用的协议
search 返回URL的查询字符串。这个字符串以问号开头
5.2方法
5.2.1

    <button onclick="btnOpen()">跳转页面</button>
    <button onclick="btnOpen1()">替换页面</button>
    <button onclick="btnOpen2()">刷新页面</button>
    <script>
        function btnOpen(){
            // assign()接收一个指定URL，跳转到指定页面，并在浏览器历史记录中生成一条记录
            location.assign('https://www.baidu.com');
        }
        function btnOpen1(){
            // replace()接收一个指定URL，替换当前页面，并且不会再浏览器历史记录生成记录
            location.replace('https://www.baidu.com');
        }
        // reload()刷新当前页面，参数默认为false表示以以最有效的方式重写加载，可能从缓存中直接加载，true表示强制从服务器中加载
        function btnOpen2(){
            location.reload();
        }
    </script>

6.history对象
6.1 该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进, 注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。
6.2属性
length 返回历史列表中的网址数
6.3方法
6.3.1back() 加载 history 列表中的前一个 URL
6.3.2forward() 加载 history 列表中的下一个 URL
6.3.3go() 加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。
6.3.4超时调用

 // 超时调用
        var id = setTimeout(() => {
            console.log('hello word');
        },1000);
        // 清除超时调用
        // clearTimeout(id);

6.3.5间歇调用

 var num = setInterval(()=> {
            console.log('hello word');
        },1000)
        setTimeout(() => {
        //取消间歇调用
            clearInterval(num);
        },5000)

码农公寓

相关文章