跳到主要内容

4 篇博文 含有标签「JavaScript」

查看所有标签

window.location

· 阅读需 6 分钟
TransonQ
TransonQ
Front-end Engineer

window.location对象是一个包含当前页面URL信息的对象。

{
    "href": "https://transon.netlify.app/blog/2023-05-24-download-blob#typescript-%E7%89%88%E6%9C%AC",
    "protocol": "https:",
    "host": "transon.netlify.app",
    "hostname": "transon.netlify.app",
    "port": "",
    "pathname": "/blog/2023-05-24-download-blob",
    "search": "",
    "hash": "#typescript-%E7%89%88%E6%9C%AC",
    "origin": "https://transon.netlify.app",
    assign:()=>{},
    reload:()=>{},
    replace:()=>{},
    "ancestorOrigins": {},
}

1. .href​

href属性返回当前页面的URL地址，可以读取和设置。例如：

// 获取当前页面的URL地址
var url = window.location.href;
console.log(url);

// 通过设置href属性来重定向页面
window.location.href = "http://www.example.com";

2. .protocol​

protocol属性返回当前页面的协议名称（例如http:或https:），可以读取和设置。例如：

// 获取当前页面的协议名称
var protocol = window.location.protocol;
console.log(protocol);

// 通过设置protocol属性来切换协议
window.location.protocol = "https:";

3. .host​

host属性返回当前页面的主机名和端口号（例如www.example.com:8080），可以读取和设置。例如：

// 获取当前页面的主机名和端口号
var host = window.location.host;
console.log(host);

// 通过设置host属性来修改主机名和端口号
window.location.host = "www.example.com:8080";

4. .hostname​

hostname属性返回当前页面的主机名（例如www.example.com），可以读取和设置。例如：

// 获取当前页面的主机名
var hostname = window.location.hostname;
console.log(hostname);

// 通过设置hostname属性来修改主机名
window.location.hostname = "www.example.com";

5. .port​

port属性返回当前页面的端口号（例如8080），可以读取和设置。例如：

// 获取当前页面的端口号
var port = window.location.port;
console.log(port);

// 通过设置port属性来修改端口号
window.location.port = "8080";

6. .pathname​

pathname属性返回当前页面的路径（例如/index.html），可以读取和设置。例如：

// 获取当前页面的路径
var pathname = window.location.pathname;
console.log(pathname);

// 通过设置pathname属性来修改路径
window.location.pathname = "/newpage.html";

search属性返回当前页面的查询字符串部分（例如?id=123&name=John），可以读取和设置。例如：

// 获取当前页面的查询字符串部分
var search = window.location.search;
console.log(search);

//通过设置search属性来添加查询参数
window.location.search = "?id=123&name=John";

8. .hash​

hash属性返回当前页面的锚点部分（例如#section1），可以读取和设置。例如：

// 获取当前页面的锚点部分
var hash = window.location.hash;
console.log(hash);

// 通过设置hash属性来跳转到指定的锚点
window.location.hash = "#section2";

9. .origin​

origin属性返回当前页面的域名（包括协议和端口号），例如http://www.example.com:8080。该属性只读。例如：

// 获取当前页面的域名（包括协议和端口号）
var origin = window.location.origin;
console.log(origin);

10. .assign(url)​

assign()方法会将当前窗口重定向到指定的URL地址，可以用来实现页面跳转。例如：

// 将当前页面重定向到指定的URL地址
window.location.assign("http://www.example.com");

11. .reload()​

reload()方法会重新加载当前页面，可以用来实现页面刷新。例如：

// 刷新当前页面
window.location.reload();

12. .replace(url)​

replace()方法会将当前窗口的URL地址替换为指定的URL地址，可以用来实现页面跳转。它与assign()方法的区别在于，replace()方法不会将新的URL地址添加到浏览器的历史记录中，因此用户不能使用“后退”按钮返回该URL地址之前的页面。例如：

// 将当前页面的URL地址替换为指定的URL地址
window.location.replace("http://www.example.com");

13. .ancestorOrigins​

window.location.ancestorOrigins属性返回一个DOMString列表，其中包含了当前页面所有祖先页面的域名（协议+主机名+端口号）。

如果当前页面在一个iframe或嵌套的子页面中，则这个列表会包含所有祖先页面的域名。如果当前页面不在iframe或嵌套的子页面中，则这个列表为空。

这个属性只读，不支持设置。以下是一个示例代码：

// 获取当前页面所有祖先页面的域名
var ancestorOrigins = window.location.ancestorOrigins;

// 遍历所有祖先页面的域名
for (var i = 0; i < ancestorOrigins.length; i++) {
  console.log(ancestorOrigins[i]);
}

如果当前页面在一个iframe或嵌套的子页面中，以上代码会输出所有祖先页面的域名。如果当前页面不在iframe或嵌套的子页面中，则输出一个空列表。

需要注意的是，window.location.ancestorOrigins属性只在一些较新的浏览器中支持，如果你的代码需要在老旧的浏览器中运行，建议先判断一下是否支持该属性再使用。

以上就是window.location对象的常用属性及其用法。这些属性可以让我们方便地获取和设置页面的URL信息，从而实现各种功能，例如重定向、切换协议、修改查询参数等等。

blob 下载函数

· 阅读需 2 分钟
TransonQ
TransonQ
Front-end Engineer

JavaScript 版本​

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 0);
}
  • 这个函数接收两个参数，第一个参数是一个Blob对象，第二个参数是要下载的文件名。
  • 该函数使用createObjectURL方法将Blob对象转换为URL，然后创建一个a标签并设置其href属性为该URL，download属性为文件名。
  • 接着将a标签添加到DOM中，并模拟用户点击该a标签来触发下载。
  • 最后，我们需要等待浏览器完成下载后，从DOM中移除a标签，并使用revokeObjectURL方法释放该URL。

TypeScript 版本​

function downloadBlob(blob: Blob, filename: string): void {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 0);
}

这个函数跟上面的代码是一样的，只是加上了类型注解。第一个参数是一个Blob对象，类型为Blob，第二个参数是要下载的文件名，类型为字符串。函数的返回值为void，因为我们只是触发了浏览器的下载操作，并没有返回任何值。

js 的 Intl 相对时间格式化

· 阅读需 1 分钟
TransonQ
TransonQ
Front-end Engineer

JavaScript 中的 Intl.RelativeTimeFormat() API 可用于获取人类可读的日期差异。

  • 时间负差
const olderDate = new Date('2022-10-31')
const currentDate = new Date('2022-11-01')

const diff = olderDate - currentDate

const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
console.log(formatter.format(Math.round(diff / 86400000), 'day'))
// yesterday
  • numeric 参数
const formatter = new Intl.RelativeTimeFormat('en', {
  numeric: 'always',
})

console.log(formatter.format(Math.round(diff / 86400000), 'day'))
// 1 day ago
  • 时间正差
const formatter = new Intl.RelativeTimeFormat('en', {
  numeric: 'auto',
  style: 'long',
  localeMatcher: 'best fit',
})

console.log(formatter.format(Math.round(diff / 86400000), 'day'))
// tomorrow

原文: Human-readable date difference in JavaScript

js 的 URL 验证函数

· 阅读需 1 分钟
TransonQ
TransonQ
Front-end Engineer

基本方法​

function checkUrl(string) {
  let givenURL
  try {
    givenURL = new URL(string)
  } catch (error) {
    console.log('error is', error)
    return false
  }
  return true
}

此种方法可能会漏掉一些不合规但是有效的 url, 譬如:youtube://abcd, a://1.2.3.4@1.2.3.4

再确认协议​

function checkHttpUrl(string) {
  let givenURL
  try {
    givenURL = new URL(string)
  } catch (error) {
    console.log('error is', error)
    return false
  }
  return givenURL.protocol === 'http:' || givenURL.protocol === 'https:'
}

使用正则表达式​

function isValidURL(string) {
  var res = string.match(
    /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi
  )
  return res !== null
}

参考: Secure JavaScript URL validation