系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网络编程 > JavaScript > 详细页面

浏览器对象模型“BOM”,对浏览器窗口进行访问和操作

时间:2020-02-06来源:电脑系统城作者:电脑系统城

location对象

location.href    url地址

location.hash    锚点

location.hostname    主机名(需要放到服务器上)

location.host    主机名+端口号(需要放到服务器上)

location.pathname   目录或者文件

location.port   端口

location.protocol   协议

location.search    ?后面的内容

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            console.log(location.href);//file:///C:/Users/96579/Desktop/index.html
            console.log(location.hash);//#top
            console.log(location.host);
            console.log(location.hostname);
            console.log(location.pathname);///C:/Users/96579/Desktop/index.html
            console.log(location.port);
            console.log(location.protocol);//file:
            console.log(location.search);//?id=1

        }    
    </script>
</head>
<body>
    <a id="top">这是顶部</a>
    <p>这是我的页面</p>
    <a href="#top"><button>回到顶部</button></a>
</body>
</html>
复制代码

 

 利用js控制location.hash ,跳转到某个锚点

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            var btn=document.getElementById("btn");
            btn.onclick=function(){
                location.hash="#top";
            }

        }    
    </script>
</head>
<body>
    <a id="top">这是顶部</a>
    <p>这是我的页面</p>
    <button id="btn">回到顶部</button>
</body>
</html>
复制代码

location.href=url  切换页面url,会有历史记录

window.location=url  切换页面url,会有历史记录

location.replace(url)  切换页面url,没有历史记录

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            setTimeout(function(){
                location.href="new.html";
            },1000);

        }    
    </script>
</head>
<body>

    <p>这是我的页面</p>

</body>
</html>
复制代码

 

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        p{
            height:100%;
            height:2000px;
            background:#abcdef;
        }
    </style>
    <script>
        window.onload=function(){

            setTimeout(function(){
                location.replace("new.html");
            },1000);

        }    
    </script>
</head>
<body>

    <p>这是我的页面</p>

</body>
</html>
复制代码

 

 location.reload()  重新加载页面(有可能从缓存中加载)

location.reload(true)  重新加载页面(强制从服务器重新加载)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){

            var reload=document.getElementById("reload");
            reload.onclick=function(){
                location.reload();//有可能从缓存中刷新
                location.reload(true);//强制从服务器重新加载
            }
        }    
    </script>
</head>
<body>

    <button id="reload">刷新</button>
</body>
</html>
复制代码

history对象

history.back() 后退一步

history.go(-1) 后退一步

history.go(-n) 后退n步

history.forward() 前进一步

history.go(1)  前进一步

history.go(n) 前进n步

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        a{
            color:orange;
        }
        a.active{
            color:red;
        }
        button{
            background:#abcdef;
            width:200px;
            height:50px;
            line-height:50px;
            text-align: center;
            border-radius:5px;
            cursor:pointer;
            margin:20px 0;
        }
    </style>
    <script>
        window.onload=function(){

            var back=document.getElementById("back");
            var back1=document.getElementById("back1");
            var back2=document.getElementById("back2");
            back.onclick=function(){
                history.back();
            }
            back1.onclick=function(){
                history.go(-1);
            }
            back2.onclick=function(){
                history.go(-2);
            }
        }    
    </script>
</head>
<body>
    <div>
        <a href="index1.html" class="active">index1.html</a> | 
        <a href="index2.html">index2.html</a> | 
        <a href="index3.html">index3.html</a>
    </div>

    <button id="back">后退一步 history.back()</button>
    <button id="back1">后退一步 history.go(-1)</button>
    <button id="back2">后退两步 history.go(-2)</button>
    <br>
    <button id="forward">前进一步 history.forward()</button>
    <button id="forward1">前进一步 history.go(1)</button>
    <button id="forward2">前进两步 history.go(2)</button>
</body>
</html>
复制代码

 

 

补充,在原生js中,可以直接使用id获取元素

如:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>new</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            console.log(box);
        }
        
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>
复制代码

 

 screen 对象

screen.availWidth  屏幕可用宽度

screen.availHeight  屏幕可用高度(去除底部任务栏)

window.innerWidth  窗口可见宽度

window.innerHeight  窗口可见高度

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){

            console.log("screen.availWidth:"+screen.availWidth);
            console.log("screen.availHeight:"+screen.availHeight);
            console.log("window.innerWidth:"+window.innerWidth);
            console.log("window.innerHeight:"+window.innerHeight);

        }    
    </script>
</head>
<body>

</body>
</html>
复制代码

 

 IE浏览器不支持console.log

navigator 对象

navigator.userAgent  获取浏览器相关信息

控制台的移动端设备可以编辑新增

 

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){

            function getBrowser(){
                var explorer=navigator.userAgent.toLowerCase();

                if(explorer.indexOf("msie")>-1){
                    return "IE8~10(低版本IE)";
                }else if(explorer.indexOf("trident")>-1){
                    return "高版本IE或者edge浏览器";
                }else if(explorer.indexOf("chrome")>-1){
                    return "chrome";
                }else if(explorer.indexOf("firefox")>-1){
                    return "firefox";
                }else if(explorer.indexOf("opera")>-1){
                    return "opera";
                }else if(explorer.indexOf("safari")>-1){
                    return "safari";
                }else{
                    return "未知浏览器";
                }
            }
            var myBrowser=getBrowser();
            alert(myBrowser);
        }    
    </script>
</head>
<body>

</body>
</html>
复制代码

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载