JS BOM之history screen navigator对象

最新推荐文章于 2024-09-24 08:45:00 发布

原创最新推荐文章于 2024-09-24 08:45:00 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #history #screen #navigator

ĴS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用JavaScript的history对象来实现浏览器历史记录的操作，包括前进、后退等功能，并通过screen对象获取屏幕尺寸信息。此外，还展示了如何利用navigator.userAgent属性来识别用户的浏览器类型和设备终端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

history对象保存了用户在浏览器中访问页面的历史记录。

history.back() 回到历史记录的上一步相当于使用了history.go(-1).-2回到历史记录的前两步。

history.forward() 回到历史记录的下一步相当于使用了history.go(1).根据历史记录前进。

history.go(-n) 回到历史记录的前n步。

history.go(n)回到历史记录的后n步。

 var btn=document.getElementById("btn");
    //点击btn按钮时回到历史记录的上一步
    btn.onclick=function(){
        history.back();
    }

screen对象：包含有关客户端显示屏幕的信息。

screen.availWidth:返回可用的屏幕宽度。

screen.availHeight:返回可用的屏幕高度。

    console.log("页面宽："+screen.availWidth);
    console.log("页面高："+screen.availHeight);//屏幕可用的宽高
    console.log("pageWidth:"+window.innerWidth);
    console.log("pageHeight:"+window.innerHeight);//窗口宽高

navigator对象：

学习目标：

navigator对象的userAgent属性
判断浏览器的类型
判断设备的终端是移动还是PC

userAgent：用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。

var explor=navigator.userAgent;
    alert(explor);

indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置，如果没有出现过，返回-1.在长的字符串中是否包含一个短的字符串。

判断使用的是什么浏览器：

function getBrower(){
        //获取userAgent属性
        var explorer=navigator.userAgent.toLowerCase(),browser;
        if(explorer.indexOf("msie")>-1){
            browser="IE";
        }else if(explorer.indexOf("chrome")>-1){
            browser="chrome";
        }else if(explorer.indexOf("opera")>-1){
            browser="opera";
        }else if(explorer.indexOf("safari")>-1){
            browser="safari";
        }
        return browser;
    }
    var explorer=getBrower();
    console.log("您当前使用的是："+explorer+"浏览器")
//您当前使用的是：chrome