精华内容
下载资源
问答
  • location对象

    2021-03-12 22:10:12
    location对象 5.1 什么是location 对象 Window 对象给我们提供了一个 location属性 用于 获取或设置窗体的URL,并且可以用于 解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为 location对象。 ...

    location对象

    5.1 什么是location 对象

    Window 对象给我们提供了一个 location属性 用于 获取或设置窗体的URL,并且可以用于 解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为 location对象。
    在这里插入图片描述

    案例:5秒之后跳转页面

    1.点击按钮跳转

     btn.addEventListener('click', function() {  
                // console.log(location.href);
                location.href = 'http://www.itcast.cn';
            })
    
    1. 5秒后自动跳转
    var timer = 5;
    countDown(); //我们先调用一次这个函数,防止第一次刷新页面空白
           
            setInterval(countDown, 1000); //每隔一秒,调用一次 重复
            
            function countDown() {
                if (timer == 0) {
                    location.href = 'http://www.itcast.cn';
                } else {
                    div.innerHTML = '您将在' + timer + '秒钟之后跳转首页';
                    timer--;
                }
            }
    

    5.2 获取URL参数数据

    主要练习数据在不同页面中的传递。
    login部分:

    <body>
        <form action="index(1).html">
            用户名:<input type="text" name="uname">
            <input type="submit" value="登录">
        </form>
    </body>
    

    index部分:

    <script>
            console.log(location.search); //?unmae=andy   获取参数
            // 1.先去掉? substr('起始的位置','截取几个字符');
            var params = location.search.substr(1); //起始位置为1  截取字符没写等于默认从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] + '欢迎您'; //arr[1] 表示数组里面第1个字符 是andy 获取过来
        </script>
    

    5.3 location常见的方法:

    在这里插入图片描述

    <script>
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                // 记录浏览历史,所以可以实现后退功能
                location.assign('http://www.itcast.cn');
                // 不记录浏览历史,所以不可以实现后退功能
                location.replace('http://www.itcast.cn');
                location.reload(true); //页面加载 相当于刷新/F5 如果参数为true 为强制刷新
            })
        </script>
    

    5.4 navigator对象

    使用下面代码,判断用户用PC端打开 或者 用移动端打开 而切换。
    在这里插入图片描述

    <script>
            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 = "../H5/index.html"; //手机
            }
        </script>
    

    5.5 history对象

    index部分:

    <body>
        <a href="list.html">点击我去往列表页</a>
        <button>前进</button>
        <script>
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                history.forward(); //前进
                history.go(1); //前进 go需要加参数
            })
        </script>
    </body>
    

    list部分:

    <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>
    
    展开全文
  • Location 对象

    2019-05-08 20:04:38
    Location 对象 Location 对象包含有关当前 URL 的信息。 Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。 Location 对象属性 Location 对象方法 Location 对象存储在 Window 对象的 ...

    Location 对象
    Location 对象包含有关当前 URL 的信息。
    Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
    Location 对象属性
    在这里插入图片描述
    Location 对象方法
    在这里插入图片描述
    Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。可以使用表达式 location 来替代 location.href。
    不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。Location 对象还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。
    除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL
    除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。
    下面放置了4个按钮,并给每个按钮设置点击事件:
    在这里插入图片描述
    页面:
    在这里插入图片描述
    现在我们来设置方法:
    thisHref()—设置一个URL,即可跳转指定页面
    function thisHref() {
    window.location.href = “https://www.baidu.com”;
    }
    点击后页面做出反应:
    在这里插入图片描述
    assign()–载入一个新的文档
    function assign1() {
    location.assign(“https://www.taobao.com”);
    }
    点击后页面作出反应:
    在这里插入图片描述
    reload()–重新载入当前文档
    function reload1() {
    location.reload();
    }
    点击后页面做出反应:
    在这里插入图片描述
    replace()–用新的文档替换当前文档
    function replace1() {
    location.replace(“https://www.bilibili.com”);
    }
    点击页面做出反应:
    在这里插入图片描述
    主机名和端口: location.host
    主机名: location.hostname
    端口号: location.port
    完整的URL: location.href
    URL协议: location.protocol
    URL的锚部分: location.hash
    URL的查询部分: location.search
    在这里插入图片描述
    浏览器输出:
    在这里插入图片描述

    展开全文
  • Location对象

    2020-12-06 10:38:02
    Location对象 Location对象表示其链接到的对象的位置URL,所做的修改反映在与之相关的对象上。Document和Window对象都有这样一个链接到Location,分别通过document.location和window.location访问。 属性 location....

    Location对象

    Location对象表示其链接到的对象的位置URL,所做的修改反映在与之相关的对象上。DocumentWindow对象都有这样一个链接到Location,分别通过document.locationwindow.location访问。

    属性

    • location.href: 包含整个URL的一个DOMStringDOMString是一个UTF-16字符串,由于JavaScript已经使用了这样的字符串,所以DOMString直接映射到一个String
    • location.protocol: 包含URL对应协议的一个DOMString,最后有一个:
    • location.host: 包含了域名的一个DOMString,可能在该串最后带有一个:并跟上URL的端口号。
    • location.hostname: 包含URL域名的一个DOMString
    • location.port: 包含端口号的一个DOMString
    • location.pathname: 包含URL中路径部分的一个DOMString,开头有一个/
    • location.search: 包含URL参数的一个DOMString,开头有一个?
    • location.hash: 包含块标识符的DOMString,开头有一个#
    • location.origin: 只读,包含页面来源的域名的标准形式DOMString
    • location.ancestorOrigins: 只读,返回结构是静态DOMStringList,以相反的顺序包含与给定Location对象关联的文档的所有祖先浏览上下文的来源,可以根据location.ancestorOrigins来确定某个站点构架了iframe文档,该属性目前尚在提案中。

    方法

    • location.assign(): 加载给定URL的内容资源到这个Location对象所关联的对象上,即用来加载一个新文档。
    • location.reload(): 重新加载来自当前URL的资源,其有一个特殊的可选参数,类型为Boolean,该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据,如果是false或没有指定这个参数,浏览器可能从缓存当中加载页面。
    • location.replace(): 用给定的URL替换掉当前的资源,与assign()方法不同的是用replace()替换的新页面不会被保存在会话的历史History中,这意味着用户将不能用后退按钮转到该页面。
    • location.toString(): 返回一个DOMString,包含整个URL,它和读取location.href的效果相同,但是用它是不能够修改location的值的。

    每日一题

    https://github.com/WindrunnerMax/EveryDay
    

    参考

    https://developer.mozilla.org/zh-CN/docs/Web/API/Location
    
    展开全文
  • location 对象

    2019-10-06 08:59:30
    何为location对象? location是最常用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供一些导航功能。它很特别,因为window.location和document.location引用的是同一个对象,它是window对象和...

    何为location对象?

    location是最常用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供一些导航功能。它很特别,因为window.location和document.location引用的是同一个对象,它是window对象和document对象的的属性。

    location对象用处

    location对象可以保存当前文档的信息,还能将URL解析为独立的片段,我们可以通过不同的属性访问这些片段。

    location对象的属性

    1. location.hash

    设置或返回从井号 (#) 开始的 URL(锚),如果URL不包含散列,则返回空字符串;

    2.location.host

    设置或返回主机名和当前 URL 的端口号。

    3.location.hostname

    设置或返回当前 URL 的主机名。

    4.location.href

    设置或返回完整的 URL。

    5.location.pathname

     设置或返回当前URL的路径部分

    6.location.port

    设置或返回当前URL的端口号

    7.location.protocol

    设置或返回当前URL的协议,如:http:或https:

    8.location.search

    设置或返回URL的查询字符串,以问号开头的

     location对象的方法

    1.location.reload()

    重新加载当前页面,默认不传参;若存在缓存,从浏览器缓存中加载;如果传入Boolean类型的true,则会强制从服务器加载。

    2.location.assign()

    加载新文档

    3.location.replace()

    新文档替换当前文档

     五秒后页面自动跳转

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>自动跳转功能</title>
        </head>
        <body>
            <div id="">
                
            </div>
            <script type="text/javascript">
                var div=document.querySelector('div');
                var timer=5;
                a();
                setInterval(a,1000);
                function a(){
                    if(timer==0){
                        location.href='https://www.baidu.com/'
                    }
                    else{
                        div.innerHTML='您将在'+timer+'秒钟后跳到百度';
                        timer--;
                    }
                }
    
    
    
    
            </script>
        </body>
    </html>

     

    转载于:https://www.cnblogs.com/smile-xin/p/11371150.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,333
精华内容 3,333
关键字:

location对象