• location对象


    一  基本概念 

    // location属性 用于获取或设置窗体的URL 并且可以用于解析URL

    // 这个属性返回的是一个对象,我们也将这个属性称之为location对象

    2)URL

    // 统一资源定位符URL 是互联网上标准资源的地址

    二 location的属性

    hash    设置或返回从井号 (#) 开始的 URL(锚)。
    host    设置或返回主机名和当前 URL 的端口号。
    hostname    设置或返回当前 URL 的主机名。
    href    设置或返回完整的 URL。
    pathname    设置或返回当前 URL 的路径部分。
    port    设置或返回当前 URL 的端口号。
    protocol    设置或返回当前 URL 的协议。
    search    设置或返回从问号 (?) 开始的 URL(查询部分)。
    origin 属性返回URL的协议,主机名和端口号。

    范例:https://fanyi.baidu.com/?aldtype=16047#en/zh/interval

    hash: "#en/zh/interval" //返回锚点
    host: "fanyi.baidu.com" //主机名
    hostname: "fanyi.baidu.com" //
    href: "https://fanyi.baidu.com/?aldtype=16047#en/zh/interval"
    origin: "https://fanyi.baidu.com"
    pathname: "/"
    port: ""
    protocol: "https:"

     三 location的方法

    assign('网址')  //1 加载新的文档。         记录浏览历史 可以后退
    
    replace('网址') //3 用新的文档替换当前文档。 不记录历史 不能后退

    reload(true) //2 重新加载当前文档。
      等于F5 参数为true = 强制刷新

    小案例:404跳转

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>404跳转</title>
    </head>
    <body>
    <div id="div"></div>
    <script>
        var div = document.querySelector('#div');
        var time = 5;
        setInterval(function () {
            if (time == 0) {
                window.location.href = 'https://www.baidu.com';
            } else {
                div.innerHTML = time + '秒后跳转到首页';
                time--;
            }
        },1000);
    </script>
    </body>
    </html>
  • 相关阅读:
    为什么处理有序数组比无序数组快?
    LeetCode:Longest Common Prefix
    LeetCode:Container With Most Water,Trapping Rain Water
    LeetCode:Substring with Concatenation of All Words (summarize)
    LeetCode:Pow(x, n)
    LeetCode:Combination Sum I II
    LeetCode:N-Queens I II(n皇后问题)
    LeetCode:Valid Sudoku,Sudoku Solver(数独游戏)
    LeetCode:Divide Two Integers
    LeetCode:Reverse Nodes in k-Group
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14454733.html
Copyright © 2020-2023  润新知