BOM ------ location对象 & navigator对象

简介: BOM ------ location对象 & navigator对象

location属性

location属性: 获取或设置窗体的URL 并可以解析URL

实现跳转页面 (5s自动跳转)

    //html代码
    <button>点击</button>
      <div></div>
      //js代码
      var btn = document.querySelector('button')
        var div = document.querySelector('div')
        btn.addEventListener('click', function() {
            location.href = 'https://csdn.net'
        })
        var timer = 5
        setInterval(function() {
            if(timer==0){
                location.href = 'https://csdn.net'
            }
            div.innerHTML = '您将在' + timer + '秒后跳转页面'
            timer--
        },1000)

location 常见方法

location.assign(): 跟 href 一样, 可以跳转页面

location.replace(): 替换当前页面, 因为不记录历史, 所以不能后退页面

location.reload(): 重新加载页面, 相当于刷新按钮或者 f5 如果参数为 true 强制刷新 ctrl+f5

    //html代码
    <button>点击</button>
    //js代码
    var btn = document.querySelector('button')
      btn.addEventListener('click', function(){
            // 记录浏览历史,所以可以实现后退功能
            // location.assign('http://baidu.com')
            // 不记录浏览历史,所以不可以实现后退功能
            // location.replace('http://baidu.com')
            // 重新刷新页面
            // location.reload()
         })

navigator 对象

navigator 对象包含有关浏览器的信息, 它有很多属性, 最常用的是 userAgent 该属性可以返回由客户机发送服务器的 user-agent 头部的值

    //匹配手机端电脑端
    if((navigator.userAgent.match(/(phone|pad|pod|iPhone)/i))){
            window.location.href = '' //手机
        } else {
            window.location.href = '' //电脑
        }

不积跬步无以至千里 不积小流无以成江海

相关文章
|
6月前
window.location对象使用
window.location对象使用
28 0
|
8月前
|
缓存 JavaScript
|
9月前
|
XML JavaScript API
DOM,BOM,window的区别
DOM,BOM,window的区别
|
11月前
|
JavaScript Go
BOM ------ history对象
BOM ------ history对象
|
11月前
|
JavaScript 前端开发 内存技术
BOM ------ Window 常见事件
BOM ------ Window 常见事件
|
JavaScript
简单解析BOM中Navigator对象
简单解析BOM中Navigator对象 navigator对象包含了有关浏览器的信息。 console.log(navigator); // 属性 // appCodeName 返回浏览器的代码名 console.log(navigator.appCodeName); // appName 返回浏览器的名称 console.log(navigator.appName); // appVersion 返回浏览器的平台和版本信息 console.log(navigator.appVersion); // cookieEna
|
JavaScript Go
简单解析BOM中History对象
简单解析BOM中History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。 &lt;button&gt;back()&lt;/button&gt; &lt;button&gt;forward()&lt;/button&gt; &lt;button&gt;go()&lt;/button&gt; 1 2 3 console.log(history); var aBtns=document.getElementsByTagName(&quot;button&quot;); // 属性 // length 返回历史记录/列表中的网址数 console.log(histo
|
JavaScript Windows
简单解析BOM中Screen对象
简单解析BOM中Screen对象 Screen 对象包含有关客户端显示屏幕的信息。 console.log(screen); // 属性 // availHeight 返回屏幕的高度(不包括Windows任务栏) // availWidth 返回屏幕的宽度(不包括Windows任务栏) console.log(screen.availHeight,screen.availWidth); // height 返回屏幕的总高度 // width 返回屏幕的总宽度 console.log(screen.height,scree
|
JavaScript
18.1、DOM对象的location对象
18.1、DOM对象的location对象
70 0
18.1、DOM对象的location对象
|
Web App开发 JavaScript
BOM location对象详解
BOM location对象详解
140 0
BOM location对象详解