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

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</style>
        body{
            width:100%;
            height;
        }
        p2000px
            background#abcdef}
    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

        }    
    bodya id="top">这是顶部ap>这是我的页面href="#top"><button>回到顶部></html>

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

(){

            var btndocument.getElementById("btn);
            btn.onclick(){
                location.hash#top;
            }

        }    
    button ="btn">

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

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

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

(){

            setTimeout((){
                location.hrefnew.html;
            },1000);

        }    
    >

    >

>

(){
                location.replace();
            },1)">>

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

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

 reloadreload);
            reload.onclick(){
                location.reload();有可能从缓存中刷新
                location.reload(true);强制从服务器重新加载
            }
        }    
    ="reload">刷新>

history对象

history.back() 后退一步

history.go(-1) 后退一步

history.go(-n) 后退n步

history.forward() 前进一步

history.go(1) 前进一步

history.go(n) 前进n步


        a
            colororange
        a.activered
        button200px50px
            line-height
            text-align center
            border-radius5px
            cursorpointer
            margin20px 0 backback);
             back1back1 back2back2);
            back.onclick(){
                history.back();
            }
            back1.onclick(){
                history.go(-1);
            }
            back2.onclick2);
            }
        }    
    div>
        ="index1.html" class="active">index1.html> | 
        ="index2.html">index2.html="index3.html">index3.html="back">后退一步 history.back()="back1">后退一步 history.go(-1)="back2">后退两步 history.go(-2)br="forward">前进一步 history.forward()="forward1">前进一步 history.go(1)="forward2">前进两步 history.go(2)>

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

如：

>new(){
            console.log(Box);
        }
        
    div ="Box">

screen 对象

screen.availWidth 屏幕可用宽度

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

window.innerWidth 窗口可见宽度

window.innerHeight 窗口可见高度

(){

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

        }    
    >

IE浏览器不支持console.log

navigator 对象

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

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

 getBrowser(){
                 explorernavigator.userAgent.toLowerCase();

                if(explorer.indexOf(msie)>-){
                    return IE8~10（低版本IE）;
                }else trident高版本IE或者edge浏览器chromefirefoxoperasafarielse{
                    未知浏览器;
                }
            }
             myBrowsergetBrowser();
            alert(myBrowser);
        }    
    >

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

猜你在找的JavaScript相关文章