BOM location对象、navigator对象、history对象

显示全部楼层

1. location对象

URL
同一资源定位符（Uniform Resource Locator,URL）是互联网上标准资源的地点。互联网上的每个文件都有一个唯一的URL，它包罗的信息指出文件的位置以及欣赏器应该怎么处置惩罚它。
URL的一样平常语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
复制代码

构成分析protocol通讯协议常用的http，ftp，maito等host主机(域名) www.itheima.comport端标语可选，省略时使用方案的默认端口如http的默认端口为80path路径由零或多个’/'符号隔开的字符串，一样平常用来表现主机上的一个目次或文件地点query参数以键值对的情势通过&符号分隔开来fragment片断 #反面内容常见于链接锚点location对象的属性
location对象属性返回值location.href获取大概设置整个URLlocation.host返回主机(域名) www.itheima.comlocation.port返回端标语假如未写返回空字符串location.pathname返回路径location.search返回参数location.hash返回片断 #反面的内容常见于链接锚点5秒后跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function () {
            //console.log(location.href);  返回文件的路径
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function () {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>
</body>
复制代码

login.html

<body>
    <form action="index.html">
        用户名: <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>
复制代码

index.html

<body>
    <div></div>
    <script>
        console.log(location.search); //?uname=andy
        //1.先去掉?  substr('起始位置',截取几个字符);
        var params = location.search.substr(1); //uname=andy
        console.log(params);
        //2.利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); //['uname','andy']
        var div = document.querySelector('div');
        //3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>
复制代码

location对象的方法
location对象方法返回值location.assign()跟href一样，可以跳转页面(也称为重定向页面)location.replace()更换当前页面，由于不记录汗青，以是不能退却页面location.reload()重新加载页面，相称于革新按钮大概f5 假如参数为true 欺压革新ctrl+f5

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //记录浏览历史，可实现后退功能
            //location.assign('http://www.itcast.cn');
            //不记录浏览历史，不可实现后退
            //location.replace('http://wwwitcast.cn');
            location.reload(true);
        })
    </script>
</body>
复制代码

2. navigator对象

navigator对象包罗有关的欣赏器的信息，它有许多属性，常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
可判断用户哪个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|WOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
     window.location.href = "";  //手机
 } else {
     window.location.href = ""; //电脑
 }
复制代码

3.history对象

window对象给我们提供了一个history对象，与欣赏器汗青记录举行交互。该对象包罗用户(在欣赏器窗口中)访问过的URL.
history作用back()可以退却功能forward()进步功能go(参数)进步退却功能参数假如为1，进步1个页面；假如为-1，退却1个页面index.html

<body>
    <a href="list.html">点击</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //history.forward();
            history.go(1);
        })
    </script>
</body>
复制代码

list.html

<body>
    <a href="index.html">点击</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //history.back();
            history.go(-1);
        })
    </script>
</body>
复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

工作时间

工作时间

BOM location对象、navigator对象、history对象

火星云矿 | 预约S19Pro，享500抵1000！