07BOM（浏览器对象模型）

最新推荐文章于 2024-10-11 16:10:25 发布

输出机器

最新推荐文章于 2024-10-11 16:10:25 发布

阅读量96

点赞数

分类专栏： JavaScript 文章标签： html css 开发语言前端 javascript

本文链接：https://blog.csdn.net/qq_44974028/article/details/123860604

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Location：地址栏对象

1. 创建(获取)：

1. window.location

2. location

2. 方法：

reload() 重新加载当前文档。刷新

3. 属性

href 设置或返回完整的 URL。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>13Location地址栏对象</title>
    </head>
    <body>
        <input type="button"  id="btn" value="刷新">
        <input type="button"  id="btn2" value="百度">
        <script>
            // 获取按钮控件
            var btn = document.getElementById("btn");
            // 绑定单击事件
            btn.onclick = function(){
                // localtion.reload();
                window.location.reload();
            }

            // 获取当前地址栏href
            var href = location.href;
            alert(href);

            var btn2 = document.getElementById("btn2");
            btn2.onclick = function(){
                // 跳转去百度
                // window.location.href = "http://www.baidu.com";
                location.href = "http://www.baidu.com";
            }

        </script>
    </body>
</html>

History：历史记录对象

1. 创建(获取)：

1. window.history

2. history

2. 方法：

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

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

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

参数：

正数：前进几个历史记录

负数：后退几个历史记录

3. 属性：

length 返回当前窗口历史列表中的 URL 数量。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>14History历史记录对象</title>
    </head>
    <body>
        <input type="button" id="btn1" value="获取当前窗口历史记录个数">
    </body>
    <script>
        var btn = document.getElementById("btn1");
        btn.onclick = function(){
            // 获取当前窗口的历史记录个数
            var length = history.length;
            alert(length);
        }
    </script>
</html>

小案例自动跳转百度首页

源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>14小案例自动跳转首页</title>
        <style>
            p{
                text-align: center;
            }
            span{
                color: rgb(49, 15, 247);
            }
        </style>
    </head>
    <body>
        <p>
            <span id="time">5</span> 秒之后自动跳转到首页
        </p>
        <script>
            // 1、显示页面效果
            // 2、倒计时读秒效果
            // 3、在方法中判断时间，如果<=0，则跳转首页
            var second = 5;
            var time = document.getElementById("time");
            function showTime(){
                second --;
                if(second <= 0){
                    location.href = "http://www.baidu.com";
                }
                
                time.innerHTML = second + "";

            }

            setInterval(showTime,1000);

        </script>
    </body>
</html>

运行效果：