TypeScript 中的 Window Navigator
Window 对象，即全局 TypeScript 对象，表示浏览器窗口中的当前网页。当前页面的位置、历史记录和文档以及其他方法和属性都可以使用此方法访问和控制。Navigator 对象是 Window 对象的属性。它包含有关用于访问网站的浏览器和设备的信息，包括用户代理、平台和语言。
TypeScript 的 Window.navigator 对象可以接收有关设备浏览器的信息并对这些对象执行操作。Window 和 Navigator 对象可以在 TypeScript 中通过将它们标识为全局变量来使用，declare 关键字可以将 Window 和 Navigator 对象表示为全局变量。用户还可以使用 Navigator 接口提供 navigator 对象的类型，以便更好地进行类型检查和代码完成。
语法
declare var window: Window; 声明 var navigator: Navigator;
然后，您可以在 TypeScript 代码中使用这些对象的属性和方法，如下所示 -
console.log(window.location.href); console.log(navigator.userAgent);
请注意，Window 和 Navigator 对象在 Node.js 中不可用，因此您只能在浏览器环境中使用它们。
示例
这是在 TypeScript Web 应用程序中使用 Window 和 Navigator 对象的示例，我们将学习如何使用它们。我们正在使用它在 HTML 页面上显示 URL 和浏览器信息。需要执行以下步骤 -
步骤
我们首先将 Window 和 Navigator 对象声明为全局变量，以便我们可以在 TypeScript 代码中使用它们。
然后，我们使用 document.getElementById() 方法获取 HTML 页面中我们想要显示 URL 和浏览器信息的 <p> 元素的引用。我们将这些引用存储在 HTMLParagraphElement 类型的 URL 和浏览器变量中。
然后，我们使用 innerHTML 属性分别将这些元素的文本内容设置为当前 URL 和浏览器信息。window.location.href 属性返回页面的当前 URL，navigator.userAgent 属性返回表示用于访问页面的浏览器和平台的字符串。
TypeScript 代码 −
这是需要编译的 TypeScript 代码，以获取我们可以添加到 HTML 的 JavaScript 代码。
declare var window: Window declare var navigator: Navigator let url: HTMLParagraphElement = document.getElementById( 'url' ) as HTMLParagraphElement let browser: HTMLParagraphElement = document.getElementById( 'browser' ) as HTMLParagraphElement url.innerHTML += window.location.href browser.innerHTML += navigator.userAgent
HTML 代码 −
这是我们添加已编译 TypeScript 代码的 HTML 代码。
<html>
<body>
<h2><i>Window Navigator</i> in TypeScript</h2>
<p id="url" style="padding: 10px; background: #d5ed9c">URL:</p>
<p id="browser" style="padding: 10px; background: #9ceda7">Browser:</p>
<script>
//Compiled TypeScript File
var url = document.getElementById('url')
var browser = document.getElementById('browser')
url.innerHTML += window.location.href
browser.innerHTML += navigator.userAgent
</script>
</body>
</html>
示例 2
在此示例中，我们将使用 TypeScript 中的 Window Navigator 对象并执行以下步骤 -
步骤
我们首先将 Window 和 Navigator 对象声明为全局变量，以便我们可以在 TypeScript 代码中使用它们。
然后，我们使用 document.getElementById() 方法获取对按钮元素和我们想要显示浏览器名称的 HTML 页面中的 <p> 元素的引用。
我们将这些引用存储在 redirectBtn 和 browserName 变量中，它们的类型为 HTMLButtonElement 和 HTMLParagraphElement。
然后，我们使用 addEventListener 方法向按钮元素添加单击事件监听器。单击按钮时，将调用事件侦听器函数，使用 window.location.href 属性将用户重定向到不同的 URL。
之后，我们使用 innerHTML 属性将 <p> 元素的文本内容设置为浏览器名称，该名称我们从 navigator.appName 属性中获取。当在浏览器中执行此代码时，当用户单击按钮时，它将把用户重定向到 "'https://www.tutorialspoint.com" 网站并显示用户的浏览器名称。
TypeScript 代码
这是需要编译的 TypeScript 代码，以获取我们可以添加到 HTML 的 JavaScript 代码。
declare var window: Window
declare var navigator: Navigator
let redirectBtn = document.getElementById('redirect') as HTMLButtonElement
let browserName: HTMLParagraphElement = document.getElementById(
'browser-name'
) as HTMLParagraphElement
redirectBtn.addEventListener('click', function () {
window.location.href = 'https://www.tutorialspoint.com'
})
browserName.innerHTML = navigator.appName
HTML 代码
这是我们添加已编译 TypeScript 代码的 HTML 代码。
<html>
<body>
<h2><i>Window Navigator</i> in TypeScript</h2>
<button id="redirect">Redirect</button>
<p id="browser-name" style="padding: 10px; background: #9ceda7">Browser:</p>
<script>
//Compiled TypeScript File
var redirectBtn = document.getElementById('redirect')
var browserName = document.getElementById('browser-name')
redirectBtn.addEventListener('click', function () {
window.location.href = 'https://www.tutorialspoint.com/index.htm'
})
browserName.innerHTML = navigator.appName
</script>
</body>
</html>
请注意，navigator.appName 属性已过时，不建议在现代浏览器中使用。您可以改用 navigator.userAgent 属性或使用功能检测方法。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
