window.location

news/2024/7/19 13:53:57 标签: js, javascript, angularjs

做了个小项目,涉及到获取浏览器请求地址的内容,遂查了相关知识:

1. 知识

Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问,Location 对象包含有关当前 URL 的信息。location属性又包含以下属性:
在这里插入图片描述

2. 举例

计入请求地址如下
http://www.mine.com/test/?sid=10&uid=AA766#/home-ewm

  • window.location.hash 对应/home-ewm
  • window.location.href 对应http://www.mine.com/test/?sid=10&uid=AA766#/home-ewm
  • window.location.search 对应sid=10&uid=AA766
    此处常常使用分割"&"的方式得到对应的参数,后传递给相应页面

3. 案例

javascript">public getQueryParams(): object {
    const query = window.location.search.substring(1);  // 得到未带?的参数部分
    console.log("请求链接的query部分: " + query);
    const vars = query.split("&");
    const params = {};
    console.log("&分割后的数组长度为" + vars.length);

    if (vars.length > 1) {
      for (let i = 0; i < vars.length; i++) {
        const pair = vars[i].split("=");
        params[pair[0]] = pair[1];      
        console.log("参数名:" + pair[0] + "对应参数值:" + params[pair[0]]);
      }
    } else {
        // 对于浏览器,第一个#后面的任何字符都会被理解为位置标识符
        // const vars_cy = query.split("#");
        const vars_cy = query.split("@");
        if (vars_cy.length > 1) {
          for (let i = 0; i < vars_cy.length; i++) {
            if (vars_cy[i]) {
              const pair = vars_cy[i].split("=");
              params[pair[0]] = pair[1];
              console.log("参数名:" + pair[0] + "对应参数值:" + params[pair[0]]);
            }
          }
    }
  }
    return params;
  }

这里是通过甲方爸爸的短信平台发短信,短信中包含链接地址,到前端接受然后拦截进入微信,因为有一个平台不支持& 符号在短信中,所以我们换成了#,@ 等符号来替代,发现#符号会被浏览器给识别,然后拼接的http://www.mine.com/test/?sid=10#uid=AA766会直接变成http://www.mine.com/test/?sid=10 ,于是就用@ 代替了。
一点小知识记录下。


http://www.niftyadmin.cn/n/956892.html

相关文章

toRef怎么用,与toRefs的区别

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><title></title> </head> <div id"app"> <p>作者:{{author}}</p> <p>书名: {{title}}</p> </div> <script src&qu…

springboot集成swagger localhost拒绝了我们的连接请求

错误如下: pom.xml <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><dependency><groupId>io.springfox</groupId><ar…

ref与reactive的用法与区别,情形

当ref接受一个原始值&#xff0c; 返回一个响应式和可变的ref对象&#xff0c;返回的对象只有一个value属性指向内部值。 啥叫指向内部值&#xff1f;啥叫value属性指向内部值&#xff1f; <!DOCTYPE html> <html> <head><meta charset"UTF-8"…

ref与reactive区别于联系的表述,没看明白

reactive()方法为一个js对象 创建响应式代理&#xff0c; 如果需要对一个原始值&#xff08;如字符串&#xff09; 创建响应式对象 一种方式是 将该原始值作为某个对象的属性&#xff0c; 调用reactive()方法 为该对象创造响应式代理对象 另一种方式就是 使用Vue给出的另一个…

springboot拦截器失效 swagger访问404问题

在将springMVC的项目改造成SpringBoot项目的过程中&#xff0c;遇到了token拦截器无法加载的问题。排查发现&#xff0c;写token拦截器之前先加入了swagger的配置文件&#xff0c;为防止后面加入拦截器导致swagger被拦截而无法访问&#xff0c;所以将swagger的配置类也写成了一…

springboot项目中约定大于配置,约定有哪些呢?

在更改公司项目框架&#xff0c;遇到的约定简单记录下&#xff0c;持续更新 1. yml配置文件或者properties配置文件使用application-{profile}的格式&#xff0c;文件可以自动加载&#xff0c;否则需要在application.yml文件中手动引入 在yml文件中,可以配置当前以applicatio…

只要有const app = Vue.createApp({,必然有mount(‘#app‘)

如果没有const app Vue.createApp(&#xff0c;则可不必有mount(’#app’)。 <!DOCTYPE html> <html> <div id"app"> <p>{{ message }}</p> <p>{{ reversedMessage }}</p> </div> <script src"https://un…