如何使用 TypeScript 设置 window.location

作者

使用 TypeScript 设置 window.location

How to set window.location using TypeScript

使用该window.location.href属性window.location在 TypeScript 中设置，例如window.location.href = 'https://google.com'. 设置
location.href属性会导致浏览器导航到提供的 URL。

这是index.html本文中示例的文件。

索引.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button id="btn">Change location</button>

    <script src="./src/index.ts"></script>
  </body>
</html>

这是相关的 TypeScript 代码。

源代码/index.ts
const btn = document.getElementById('btn');

btn?.addEventListener('click', function onClick() {
  window.location.href = 'https://google.com';
});
如果加载页面并单击按钮，您将导航到分配给属性的网页。

location.href属性返回一个包含整个 URL的

字符串并允许更新 href。

当您设置 的值时window.location.href，浏览器将导航到提供的 URL。

您也可以使用
window.location.assign
方法来获得相同的结果。

源代码/index.ts
const btn = document.getElementById('btn');

console.log(window.location.href);

btn?.addEventListener('click', function onClick() {
  window.location.assign('https://google.com');
});

该window.location.assign()方法使我们能够导航到新页面。

该方法将 URL 字符串作为参数并导航到该页面。

类似的方法assign包括：

  • window.location.reload()– 重新加载当前 URL，如刷新按钮。
  • window.location.replace()– 重定向到提供的 URL。与该方法的不同之处assign()在于，使用该replace()方法时，当前页面不会保存在会话历史记录中，因此用户无法使用后退按钮导航到该页面。

如果您需要检查位置对象的所有属性，这里是来自
MDN 文档的链接。

–

发表评论