• URL


    <!--1. URL -->
    http://www.baidu.cn/index.html?name=andy&age=18#link
    protocol  //通讯协议 http
    host  //域名 www.baidu.cn
    port //端口  http 默认80
    path //定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)/index.html
    query //参数 以键值对形式&分隔 name=andy&age=18
    filename  // 定义文档/资源的名称 #后面的内容 link 锚点 链接
    
    <!-- 2.location -->
    window对象给我们提供了一个location属性用于获取或设置窗体的URL,并可以用于解析URL 因为返回的是一个对象,所以也称location对象
    location.href  //返回完整的URL    // http://www.baidu.cn/index.html?name=andy&age=18#link
    location.host  //返回一个URL的主机名和端口
    location.port  //   返回一个URL服务器使用的端口号
    location.pathname  //返回的URL路径名                //index.html
    location.search  // 返回一个URL的查询部分  返回参数   //?name=andy&age=18
    location.hash  //   返回一个URL的锚部分  #后面的内容   //#link
    
    location对象的常见方法:
    location.assign() 跟href一样,可以跳转页面(也称重定向页面)
    location.replace() 替换当前页面,因为不记录历史,所以不能后退页面
    location.reload() 重新加载页面,相当于刷新或F5,如果参数为true强制刷新ctrl + f5
        <script>
            btn.addEventListener('click', function() {
            // 记录浏览历史,所以可以实现后退功能
            location.href = 'http://www.baidu.com';
            // location.assign('http://www.baidu.com');
            // 不记录浏览历史,所以不可以实现后退功能
            // location.replace('http://www.baidu.com');
            location.reload(true);
            })
        </script>
    
    <!-- 3. history对象 -->
    window对象给我们提供了一个 history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
    back()  //后退
    forward()  //前进功能
    go(参数)   //1前进 -1后退
    
    
    <!--4. JS获取url参数: -->
    A. JS函数用于获取url参数:
        function getQueryVariable(variable)  {
             var query = window.location.search.substring(1);
             var vars = query.split("&");
             for (var i=0;i<vars.length;i++) {
                     var pair = vars[i].split("=");
                     if(pair[0] == variable){return pair[1];}
             }
             return(false)  }
        url 实例:
            http://www.runoob.com/index.php?id=1&image=awesome.jpg
            调用 getQueryVariable("id") 返回 1。
            调用 getQueryVariable("image") 返回 "awesome.jpg"
    
    B.js 获取URL中的参数并转换为对象:
        var $_REQUEST = new Object, aParams = document.location.search.substr(1).split("&");
        for (i = 0; i < aParams.length; i++) {
          var aParam = aParams[i].split("=");
          $_REQUEST[aParam[0]] = aParam[1]
        }
        实例: url  http://www.xxx.net/x/x.html?id=898602B8261890349226&aaa=123&ccc=456
            aParams   =   ["iccid=898602B8261890349226", "aaa=123", "ccc=456"]
            $_REQUEST   = {iccid: "898602B8261890349226", aaa: "123", ccc: "456"}
    
    C.JS将URL参数转换为对象:
        function urlToObj(str){
            var obj = {};
            var arr1 = str.split("?");
            var arr2 = arr1[1].split("&");
            for(var i=0 ; i < arr2.length; i++){
                var res = arr2[i].split("=");
                obj[res[0]] = res[1];    //下标为[0]作为对象的key,下标为[1]则是key对应的值
            }
            return obj;
            }
        console.log(urlToObj('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=%E7%99%BE%E5%BA%A6'))
        //{ie: "utf-8", f: "3", rsv_bp: "1", tn: "baidu", wd: "%E7%99%BE%E5%BA%A6"}
        
    <!-- 5.vue获取URL中的参数 -->
    获取?后面的参数:
        http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22
        获取参数方法   let id = this.$route.query.username
    获取不带?的URL中的参数:
        http://192.168.1.12:8080/#/home/newsinfo/234
        获取参数方法   let id = this.$route.params.id
    
    <!--6, ping cmd查询host域名是否连通 -->  
    ping www.baidu.com
        正在 Ping www.a.shifen.com [163.177.151.109] 具有 32 字节的数据:
        来自 163.177.151.109 的回复: 字节=32 时间=9ms TTL=57
        来自 163.177.151.109 的回复: 字节=32 时间=10ms TTL=57
        163.177.151.109 的 Ping 统计信息:
            数据包: 已发送 = 4,已接收 = 4,丢失 = 0 (0% 丢失),
    
    <!-- Debug 查错 -->
    
  • 相关阅读:
    OKR实施方法——关于思路和流程的思考
    如何制作一份疫情场所分布地图?(附数据和源码)
    经纬度编码方法推荐-plus code简介
    快递到车服务的实现思路和问题思考
    ACC自适应巡航控制系统介绍
    《无人驾驶》-了解无人驾驶最佳读物
    手把手教你制作微信小程序,开源、免费、快速搞定
    2点GPS坐标求方位角
    GPRS 应用详解_GPRSsim800c(转)
    STM32的ADC采样与多通道ADC采样(转)
  • 原文地址:https://www.cnblogs.com/xm0328/p/13783058.html
Copyright © 2020-2023  润新知