数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究TypeScript 中的窗口导航器
Window 对象，也称为全局 TypeScript 对象，表示浏览器窗口中的当前网页。可以使用此方法访问和控制当前页面的位置、历史记录和文档，以及其他方法和属性。Navigator 对象是 Window 对象的一个属性。它包含有关用于访问网站的浏览器和设备的信息，包括用户代理、平台和语言。
TypeScript 的 Window.navigator 对象可以接收有关设备浏览器的信息，并对这些对象执行操作。可以通过将 Window 和 Navigator 对象识别为全局变量在 TypeScript 中使用它们，并且 declare 关键字可以将 Window 和 Navigator 对象表示为全局变量。用户还可以使用 Navigator 接口为 navigator 对象提供类型，以实现更好的类型检查和代码补全。
语法
declare var window: Window; declare 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 页面中 <p> 元素的引用，我们希望在其中显示 URL 和浏览器信息。我们将这些引用存储在 HTMLParagraphElement 类型的 URL 和 browser 变量中。
然后，我们使用 innerHTML 属性将这些元素的文本内容分别设置为当前 URL 和浏览器信息。window.location.href 属性返回页面的当前 URL，而 navigator.userAgent 属性返回一个字符串，表示用于访问页面的浏览器和平台。
TypeScript 代码：
这是需要编译以获取可以添加到 HTML 中的 JavaScript 代码的 TypeScript 代码。
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://tutorialspoint.com" 网站并显示用户的浏览器名称。
TypeScript 代码
这是需要编译以获取可以添加到 HTML 中的 JavaScript 代码的 TypeScript 代码。
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://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://tutorialspoint.com/index.htm'
})
browserName.innerHTML = navigator.appName
</script>
</body>
</html>
请注意，navigator.appName 属性被认为已过时，不建议在现代浏览器中使用。您可以使用 navigator.userAgent 属性或使用功能检测方法。
3K+ 次浏览
